源地址:http://blog.sina.com.cn/s/blog_57e7d45a0100ybxk.html
1、特殊性
首先来看一下这个例子将会发生的情形:
以下是代码片段:
.grape { color:Blue; }
H1 { color: Red; }
<h1 class="grape">Meerkat<em>Central</em></h1>
H1和.grape都匹配上面的H1元素,那么到底应该使用哪一个呢?
实践证明.grape是正确答案,把句子显示为蓝色。
根据规范,一般的HTML元素选择符(H1,P等)具有特殊性1,类选择符具有特殊性10,ID选择符具有特殊性100,值越大权重就越大,就优先选用。
以下是代码片段:
H1 { color: Red; } P EM { color: Blue; } .grape { color: Fuchsia; } P.bright { color: Yellow; }
P.bright EM.dark{ color: Gray; } #ID01 { color: Red; }
2、继承
在特殊性的框架下,被继承的值具有特殊性0,也就是说任何显式声明的规则将会覆盖其继承样式,即便这条规则具有多高的权重。
以下是代码片段:
H1#ID01 { color: Red; }
EM{ color: Gray; }
<H1ID="ID01>Meerkat<EM><Central</EM></H1>
虽然ID选择符特殊性最高,但由于在特殊性的框架下,继承值只有特殊性0,因些Central会显示为Gray颜色。
3、STYLE元素
还有sytle元素在CSS下权值定义为100,尽管ID选择也一样,实际上style元素比ID具有更高的特殊性。
以下是代码片段:
#ID01 EM{ color: Gray; } <H1 ID="ID01">Meerkat <EM style="color: red;">Central</EM>!</H1>
会显示为red颜色。
4、重要性(!important)
!important具最高特特性比如说1000,因此!important规则会覆盖内联STYLE属性的内容。
以下是代码片段:
H1{ color: red !important; }
<H1style="color:black;">MeerkatCentral!</H1>
将显示为RED颜色。 一种特殊情形
以下是代码片段:
P#warn { color: Red !important; }
EM { color: Black; }
<p id="warn">This text is red, but<em>emphasized text isblack.</em></p>
虽然定义!important最高特殊性,但句子并没有全部显示为RED红色,为什么呢?也许我们得回头看看前面的规则,在前面的第二点继承中提“在特殊性的框架下,继承值只有特殊性0。”因此即便定义!important,继承里的特殊性也只有0,所以显示为特殊性为1的EM规则。
权重顺序为:继承 => HTML普通选择符=> 类选择符 =>style元素 =>!important
5、层叠
1)若两条规则具有相同的权值、起源及特殊性,那在样式表中最后出现的规则优先。
2) 任何位于文档中的规则都比引入的规则优先。
举一些例子吧:
h1 {color: red;}
/* 只有一个普通元素加成,结果是 0,0,0,1 */
body h1 {color: green;}
/* 两个普通元素加成,结果是 0,0,0,2 */
——后者胜出
h2.grape {color: purple;}
/* 一个普通元素、一个class选择符加成,结果是 0,0,1,1*/
h2 {color: silver;}
/*一个普通元素,结果是 0,0,0,1 */
——前者胜出
html > body table tr[id=”totals”] td ul > li {color: maroon;}
/* 7个普通元素、一个属性选择符、两个其他选择符,结果是0,0,1,7 */
li#answer {color: navy;}
/* 一个ID选择符,一个普通选择符,结果是0,1,0,1 */
——后者胜出