<!DOCTYPE html> <html> <head> <meta charset="urf-8"> <title>css权威指南_特指度</title> <style> body{ margin: 0; padding: 0; } .sign{ color: red; font-weight: bold; } h1, h2, #grape3, h4{ height: 2em; /*特指度 = 0,1,0,2 相同属性选择符在同一特指度位累加*/ } h1{ background: red; /*特指度 = 0,0,0,1 */ } h2{ background: silver; /*特指度 = 0,0,0,1 */ } h1.grape{ color: white; /*特指度 = 0,0,1,1 */ } h2.grape2{ color: yellow; /*特指度 = 0,0,1,1 */ } #grape3{ background: green; /*特指度 = 0,1,0,0 */ } *{ color: gray; /*通用选择符将所有元素字体颜色设置为灰色，但是根据规则 通用选择符不增加特指度即0,0,0,0*/ } h4{ background: blue; color: white; } h4 > span{ background: white; /*特指度 = 0,0,1,1 注意这里连接符不增加特指度,连零都不是*/ } h5{ background: transparent !important; /*重要声明和非重要声明分开处理，重要声明始终胜出*/ } </style> </head> <body> <h3> <pre> /* From: CSS权威指南(第四版)_3.1_特指度 Q: 我们可以用多种方式选择设置元素的样式, 同一个元素可能被一个或多个规则选择 而且每个规则的选择符都不尽相同，因为匹配的元素只能为其中一个样式，那么如何 知道那个规则胜出？ A: 用户代理会计算每个规则中选择符的特制度，然后将其依附到规则中的声明上，如果 两个或多个属性声明有冲突，特制度最高的声明胜出 R: 一个特指度值由四部分构成，例如0,0,0,0 选择符的特指度通过下述规则确定: 1、选择符中的每个ID属性加0,1,0,0 2、选择符中的每个类属性值、属性选择或伪类加0,0,1,0 3、选择符中的每个元素和伪元素加0,0,0,1，伪类到底有没有特指度在css2中表述的有些 自相矛盾，不过css2.1明确指出，伪元素有特指度 <span class="sign">4、连接符和通用选择符不增加特指度</span> </pre> </h3> /*section_1*/ <h1 class="grape">abc</h1> /*section_2*/ <h2 class="grape2">def</h2> /*section_3*/ <h3 id="grape3">hij</h3> /*section_4*/ <h4 class="grape4">sss<span>XXXX</span>sss</h4> /*span元素字体颜色继承h4样式，即字体颜色为白色*/ 同时我们还设置了全局字体颜色为灰色，实际显示效果也为灰色，这里体现了另一个特点: 即规则第四条： 继承不增加特指度，具体来说跟连接符一样连特指度都没有那就是连零都不是， 通用选择符的特指度为0,0,0,0，所以span内元素字体颜色为灰色，而非继承自父元素 */ /*section_5*/ <h5 style="background: orange; height: 2em;">行内样式特指度</h5> /*目前所见到的特指度都以零开头，因此你可能在想， 那一位为什么要存在呢？ 存在必定有用。 那一位是为行内样式声明保留的，行内样式声明的特指度比其他的声明都要高*/ </body> </html>