CSS特殊性

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

4个等级的定义如下：

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

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

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

l  第四等：代表类型选择器和伪元素选择器，如div  p，权值为0001。—a:first-letter{color:red;}　　—div{color：red；}

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

5、特殊性值计算

　　计算一个组合选择器的特殊性的时候就先计算各种选择器的数量以及对应的特殊性再相加，比如

 1 div ul li              /* 0,0,0,3    3个元素选择器 */
 2 
 3 div.aside ol li        /* 0,0,1,3    1个类选择器，3个元素选择器 */
 4 
 5 a:hover                /* 0,0,1,1    1个伪类选择器，1个元素选择器 */
 6 
 7 div.navlinks a:hover   /* 0,0,2,2    1个类选择器，1个伪类选择器，2个元素选择器 */
 8 
 9 .affix.top             /* 0,0,2,0    多类选择器 注 */
10 
11 input[type="text"]     /* 0,0,1,1    1个属性选择器，1个元素选择器 */
12 
13 input[name="sex"][type="radio"]
14                        /* 0,0,2,1    2个属性选择器，1个元素选择器 */
15 
16 #title em              /* 0,1,0,1    1个 ID 选择器，1个元素选择器 */
17 
18 h1#title em            /* 0,1,0,2    1个 ID 选择器，2个元素选择器 */
19 
20 *                      /* 0,0,0,0    1个通用选择器 */

注：多类选择器有多少个类就计算多少个类，不支持多类选择器的 IE6 会理解为一个类

比较选择器特殊性高低直接从左向右依次比较，数字大的则优先级更高，如果相同就比较下一位，所有位都相同则优先级是一样高，当选择器优先级一样高的时候后申明的样式会覆盖前面申明的样式

每个级别的优先级值是相互独立的，13个元素选择器写在一堆也不会比1个类选择器的特殊性高

第一个0是用于行内样式的，且仅用于行内样式

<nav style=""></nav> <!-- 1,0,0,0 -->

 

转载于:https://www.cnblogs.com/zc168/p/7067183.html