了解CSS选择器的优先级/特异性

Question

我想了解CSS选择器如何处理属性冲突。如何选择一项财产而不是另一项财产？

div {

  background-color: red;

}



div.my_class {

  background-color: black;

}



div#my_id {

  background-color: blue;

}



body div {

  background-color: green;

}



body>div {

  background-color: orange;

}



body>div#my_id {

  background-color: pink;

}


<div id="my_id" class="my_class">hello</div>

选择器优先级如何工作？

Answer 1

我将仅介绍CSS 2.1规范本身的链接，以及浏览器 应 如何计算特异性：

CSS 2.1第6.4.3节：

选择器的特异性计算如下：

• 如果声明的来源是’style’属性而不是带有选择器的规则，则计数为1，否则为0；否则（= a）（在HTML中，元素的“
  style”属性的值是样式表规则。这些规则没有选择器，因此a = 1，b = 0，c = 0和d = 0。）
  
• 计算选择器中ID属性的数量（= b）
• 计算选择器中其他属性和伪类的数量（= c）
• 计算选择器中元素名称和伪元素的数量（= d）
• 特异性仅基于选择器的形式。特别是，即使将id属性定义为“ ID”，形式为[[id = p33]”的选择器也被视为属性选择器（a = 0，b =
  0，c = 1，d = 0）在原始文件的DTD中。
  
  
  

将四个数字abcd（在基数较大的数字html" target="_blank">系统中）连接起来可得出特异性。

如果特异性相同，则CSS 2.1第6.4.1节生效：

1. 最后，按指定的顺序排序：如果两个声明的权重，来源和特异性相同，则以后者为准。导入的样式表中的声明被视为在样式表本身中的任何声明之前。
   

请注意，这里所说的是样式的定义时间，而不是使用时间。如果类.a和.b具有相同的特异性，则以 样式表中 最后定义 的那个 为准。
<p class="a b">...</p>而<p class="b a">...</p> 将同样的风格，根据定义顺序.a和.b。