本文主要是介绍CSS 层叠 学习笔记，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
看了一天控制器和视图头都大了，于是去微博上逛了逛，看到了一个讨论CSS权重的博客，于是把书翻了翻，对CSS中的层叠做一个笔记。
先从一个实例说起：
小明写了一个列表，并给里面的列表项添加了一些样式：
#list li{color: #000;
}<ul id="list"><li>Javascript</li><li>HTML</li><li>CSS</li>
</ul>结构写好了，正想收工，这时候加了一个需求：鼠标选中某一个列表项的时候，将它的颜色变为红色。小明一看，这还不简单，给单击的元素加个类名”selected”，然后把对应的样式写好不就行了！
li.selected{color: #f00;
}正高兴，结果一运行，不管鼠标怎么点，什么变化都没有。
这就是今天要讨论的问题，为什么会什么变化都没有，应该怎么解决？
我们都知道，每个合法的文档都会生成一颗结构树，我们选择元素时，就根据元素的祖先、属性、兄弟元素等创建选择器。只有有了这颗结构树，选择器才能起作用，这也是CSS继承的核心。
继承是从一个元素向其后代传递属性值所采用的机制，确定应当向一个元素应用哪些值时，浏览器不仅要考虑继承，还要考虑声明的特殊性，另外需要考虑声明本身的来源，这个过程就称之为层叠。
特殊性
对于一个选择器的特殊性，CSS将其表现为4个部分，代表了特殊性的权重，比如0, 0, 0, 0。
具体加权规则如下：
- 对于选择器中给定的各个id属性值，加 0, 1, 0, 0
- 对于选择器中给定的各个类属性值（class）、属性选择（[href]等）或伪类（:active，:first-child等），加 0, 0, 1, 0
- 对于选择器中给定的各个元素（标签名）和伪元素（:before等），加 0, 0, 0, 1
- 结合符（>, ~等）和通配选择器（*）对特殊性没有任何贡献
比如
#title{} //0, 1, 0, 0
p span //0, 0, 0, 2
.selected //0, 0, 1, 0
p.bright span.dark //0, 0, 2, 2
div#slidebar *[href] //0, 1, 1, 1对于他们的优先级按数值从左到右比较，碰到一项大的，这个特殊性就高，比如0, 1, 1, 0高于0, 1, 0, 0，0, 0, 1, 0高于0, 0, 0, 99
至于第一项是怎么来的呢，其实第一项代表的是元素的内联样式，也就是说内联样式高于一切样式，就算指定了id也好，内联样式最终也会覆盖掉其他地方定义的样式：
#orange{color: #ff90000;
}<!-- 最终显示还是白色 -->
<div id="orange" style="color: fff"></div>重要性
但是即使是最高优先级的内联样式，我们还是有办法覆盖掉它，这就是!important声明，这个声明在结束分号之前加入。
加入!important声明的优先级将高于其他的。
.orange{color: #ff9000 !important;
}
#book{color: #ccc;
}<!-- 最后显示的是橙色（#ff9000）-->
<div id="book" class="orange" style="color: #000">example</div>继承性
所谓继承性就是样式不仅应用到了指定的元素，还会应用到它的后代元素，举个例子：
h1{color: #ff9000;
}<h1>这是一个<span>大标题</span></h1>给h1指定颜色后，span的颜色也随之变为了橙色，因为span是h1的子元素，对于ul中的li也是一样。当然，也有很多样式是不会继承的，比如边框（我们当然不希望给外层元素添加边框后里面全有了边框），对于margin和padding也是一样的。
总的来说，继承是一个CSS中最基本的内容，我们对于它都是“熟视无睹”了。
层叠
其实说了这么多大家应该对优先级都理解的差不多了，层叠说白了就是对所有的样式进行计算，确定最后应用的是哪一个样式。
需要注意的是对于同样优先级的样式，按声明的先后顺序排序，后声明的将覆盖掉之前声明的，这个应该不难理解。
小Tip
最后有一个小提示，对于超链接的样式，我们经常会设置它的四个状态的样式值：未被访问（:link）、被访问过（:visited）、鼠标悬浮（:hover）和鼠标按下（:active）
在说到特殊性的时候我们提到过，对于伪类，加0, 0, 1, 0，所以这四者的优先级是一样的，那么就需要按声明顺序进行排序了，一般建议按L-V-H-A的顺序声明：
:link{}
:visited{}
:hover{}
:active{}变换一下顺序就知道原因了，连接要么是点过的，要么是未点过的，所以如果把hover或active放在link和visited前面就永远被它们覆盖了。
最后，本文最开始出现的情景，现在应该轻而易举就能解决了吧？
这篇关于CSS 层叠 学习笔记的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
