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前面就永远被它们覆盖了。

最后，本文最开始出现的情景，现在应该轻而易举就能解决了吧？