原文:http://segmentfault.com/blog/dopppler/1190000002427029
为了解决冲突,确定哪条规则胜出并最终被应用,CSS提供了三种机制:继承、层叠和特指。
1.继承
CSS 中的祖先元素会向后代传递一样东西:CSS属性的值。可以继承的属性相当一部分都个文本有关,比如颜色、字体、字号。然而,也有很多 CSS 属性不能继承,因为继承这些属性没有意义。这些不能继承的属性主要涉及元素盒子的定位和显示方式,比如边框、外边距、内边距。
注意:由于字体和文本样式是可以继承的,所以在使用相对字体单位(如百分比和 em)时要格外小心。如果某个标签的字体大小被设置为 80%,而它的一个后代的字体大小也被设置为 80%,那么该后代中文本最终的字体大小将是 64%( 80%的 80%)。这有时候可能并不是你想要的结果。
2.层叠
层叠,就是层叠样式表中的层叠,是一种样式在文档层次中逐层叠加的过程,目的是让浏览器面对某个标签特定属性值的多个来源,确定最终使用哪个值。
提示:层叠是 CSS 的核心机制,理解了它才能以最经济的方式写出最容易改动的 CSS,让文档外观在达到设计要求的同时,也给用户留下一些空间,让他们能根据需要更改文档的显示效果(比如整体调整字号)。
2.1 样式来源
以下是浏览器层叠各个来源样式的顺序:
- 浏览器默认样式
- 用户样式表
- 作者链接样式表(按照它们链接到页面的先后顺序)
- 作者嵌入样式
- 作者行内样式
其中,用户 是指有特别需求的用户,例如视障人士,他们可以通过用户样式表,强制浏览器加载的所有网站都以更大的字号,更容易分辨的颜色显示内容。而 作者,就是网页设计师(你)。
浏览器会按照上述顺序依次检查每个来源的样式,并在有定义的情况下,更新对每个标签属性值的设定。整个检查更新过程结束后,再将每个标签以最终设定的样式显示出来。
2.2 层叠规则
-
层叠规则一:找到应用给每个元素和属性的所有声明。
-
层叠规则二:按照顺序和 权重 排序。
-
层叠规则三:按 特指度(specific)排序。
-
层叠规则四:顺序决定权重。
提示:声明也可以有权重,
空格!important 分号( ;)
用于加重声明的权重。
例如:p {color:green !important; font-size:12pt;}
3.特指
计算选择符的特指度
- 一个简单的记分规则,即对每个选择符都要按下面的 ICE 公式计算三个值:
I-C-E(ID-Class-Element)
说明:1.三个字母间的短横线是分隔符,并非减号;2.这并非真正的三位数,只不过大多数情况下把结果看成一个三位数没问题,三位数最大的胜出。
但是,千万得知道 0-1-12 与 0-2-0 相比,仍然是 0-2-0 的特指度更高。
- 针对这个公式的计分办法如下:
1.选择符中有一个ID,就在I的位置加1;
2.选择符中有一个类,就在C的位置加1;
3.选择符中有一个元素(标签)名,就在E的位置上加1;
4.得到一个三位数。
可以通过下面的例子来理解:
P{} //0-0-1 特指度=1
p.largetext{} //0-1-1 特指度=11
p#largetext{} //1-0-1 特指度=101
body p#largetext{} //1-0-2 特指度=102
body p#largetext ul.mylist{} //1-1-3 特指度=113
body p#largetext ul.mylist li{} //1-1-4 特指度=114
在此,每个选择符都比前一个选择符的特指度更高。
4.查理版简单层叠要点
在这个查理版里,只要记住三条规则就够了。这三条规则适合所有情况:
-
规则一: 包含 ID 的选择符胜过包含类的选择符,包含类的选择符胜过包含标签名的选
择符。 -
规则二: 如果几个不同来源都为同一个标签的同一个属性定义了样式,行内样式胜过嵌入样式,嵌入样式胜过链接样式。在链接的样式表中,具有相同特指度的样式,后声明的胜过先声明的。
规则一胜过规则二。换句话说,如果选择符更明确(特指度更高),无论它在哪里,都会
胜出。
- 规则三: 设定的样式胜过继承的样式,此时不用考虑特指度(即显式设定优先)。
下面简单解释一下规则三。
比如下面的标记:
<div id="cascade_demo">
<p id="inheritance_fact">Inheritance is <em>weak</em> in the Cascade</p>
</div>
和下面的规则:
div#cascade_demo p#inheritance_fact {color:blue;}
- 2 - 0 - 2 (高特指度)
会导致单词 weak
变成蓝色,因为它从父元素 p 那里继承了这个颜色值。
但是,只要我们再给 em 添加一条规则 em {color:red;}
- 0 - 0 - 1 (低特指度)
em
就会变成红色。因为,虽然它的特指度低(0-0-1),但 em
继承的颜色值,会被为它明确(显式)指定的颜色值覆盖,就算(隐式)遗传该颜色值的规则的特指度高(2-0-2)也没有用。
参考资料