css---选择器的特殊性

浏览数：32 / 时间：2015年06月09日

特殊性这点吃了亏，是该梳理一下了~

先说一下大概的选择器，沾代码技术分享

最权威的还是《css权威指南》

技术分享

我们把特殊性分为4个等级，每个等级代表一类选择器，每个等级的值为其所代表的选择器的个数乘以这一等级的权值，最后把所有等级的值相加得出选择器的特殊值。

4个等级的定义如下：

l 第一等：代表内联样式，如: style=””，权值为1000。

l 第二等：代表ID选择器，如：#content，权值为100。

l 第三等：代表类，伪类和属性选择器，如.content，权值为10。

l 第四等：代表类型选择器和伪元素选择器，如div p，权值为1。

注意：通用选择器（*），子选择器（>）和相邻同胞选择器（+）并不在这四个等级中，所以他们的权值都为0。

栗子来了技术分享

<html>
#content div#main-content h2{
color:red;
 }
/*=2*100+2*1=202*/

#content #main-content>h2{
color:blue
 }
/*=2*100+1=201*/

body #content div[id="main-content"] h2{
color:green;
 }
/*=1*100+1*10+3*1=113*/

#main-content div.paragraph h2{
color:orange;
 }
/*=1*100+1*10+2*1=112*/

#main-content [class="paragraph"] h2{
color:yellow;
 }
/*=1*100+1*10+1*1=111*/

div#main-content div.paragraph h2.first{
color:pink;
}
/*=1*100+2*10+3*1=123*/
</html>

郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。

css---选择器的特殊性