css 权重 特殊性

时间:2022-01-11 19:16:47
选择器的特异性由 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 规范,层叠的顺序为(优先级从低到高):
浏览器声明
用户普通声明
作者普通声明
作者重要声明
用户重要声明