CSS的特殊性和优先级

特殊性

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

• 第一等：代表行内样式，如: style=””，权值为1000。
• 第二等：代表ID选择器，如：#content，权值为100。
• 第三等：代表类，伪类和属性选择器，如.content，权值为10。
• 第四等：代表元素选择器和伪元素选择器，如p，权值为1。

通常，我们使用四个以逗号分隔的数字来表示特殊性，比如:

• 行内样式的特殊性为 1，0, 0, 0
• 每个元素或伪元素选择器特殊性为 0，0，0，1
• 每个类、伪类或者属性选择器的特殊性为 0，0，1，0
• 每个ID选择器的特殊性为 0，1，0，0

结合符和通配符的对特殊性没有贡献  例子：

div ul li              /* 0,0,0,3    3个元素选择器 */
div.aside ol li        /* 0,0,1,3    1个类选择器，3个元素选择器 */

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

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

优先级

• !important
• 行内样式（1000）
• ID选择器（0100）
• 类选择器/属性选择器/伪类选择器（0010）
• 元素选择器/关系选择器/伪元素选择器（0001）
• 通配符选择器（0000）