css 权重 特殊性

Posted 2020-06-09

选择器的特异性由 CSS2 规范定义如下：

 

  !important的规则比其他的权值都大     p{color: red !important}

• 如果声明来自于“style”属性，而不是带有选择器的规则，则记为 1，否则记为 0 (= a)
• ID 属性的个数 ( b)
• 其他属性和伪类的个数 ( c)
• 元素名称和伪元素的个数 ( d)

将四个数字按 a-b-c-d 这样连接起来（位于大数进制的数字系统中），构成特异性。

一些示例：

 

 *             {}  /* a=0 b=0 c=0 d=0 -> specificity = 0,0,0,0 */

 li            {}  /* a=0 b=0 c=0 d=1 -> specificity = 0,0,0,1 */

 li:first-line {}  /* a=0 b=0 c=0 d=2 -> specificity = 0,0,0,2 */

 ul li         {}  /* a=0 b=0 c=0 d=2 -> specificity = 0,0,0,2 */

 ul ol+li      {}  /* a=0 b=0 c=0 d=3 -> specificity = 0,0,0,3 */

 h1 + *[rel=up]{}  /* a=0 b=0 c=1 d=1 -> specificity = 0,0,1,1 */

 ul ol li.red  {}  /* a=0 b=0 c=1 d=3 -> specificity = 0,0,1,3 */

 li.red.level  {}  /* a=0 b=0 c=2 d=1 -> specificity = 0,0,2,1 */

 #x34y         {}  /* a=0 b=1 c=0 d=0 -> specificity = 0,1,0,0 */

 style=""          /* a=1 b=0 c=0 d=0 -> specificity = 1,0,0,0 */

 

important > 内联 > ID > 类 > 标签 | 伪类 | 属性选择 > 伪对象 > 继承 > 通配符”

内联样式即写在style内的样式

 

当多个规则应用于同一个元素时，权重越高的将会优先采用，(赋予256个class 的话权重大于 id)

参考：http://cssn.in/ja/043

 

 

样式层叠

如果一个元素的两条规则具有同样的权值，特殊性和起源，那么应用后面那个

文档中的规则比引入的规则权值大

元素的style 属性被认为是在样式表的末尾，因此和id 冲突时优先使用

 

根据 CSS2 规范，层叠的顺序为（优先级从低到高）：

浏览器声明

用户普通声明

作者普通声明

作者重要声明

用户重要声明