我想了解 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>

选择器优先级如何工作？

我将添加一个指向 CSS 2.1 规范本身的链接，以及浏览器是如何工作的supposed计算特异性：

CSS 2.1 第 6.4.3 节 http://www.w3.org/TR/CSS2/cascade.html#specificity:

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

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

连接四个数字 a-b-c-d（在具有大基数的数字系统中）给出了特异性。

如果特异性相同，那么CSS 2.1 第 6.4.1 节 https://www.w3.org/TR/CSS2/cascade.html#cascading-order发挥作用：

4. 最后，按指定的顺序排序：如果两个声明具有相同的权重、来源和特异性，则指定的后者获胜。导入样式表中的声明被视为位于样式表本身中的任何声明之前。

请注意，这里讨论的是样式定义的时间，而不是使用的时间。如果上课.a and .b具有相同的特异性，以最后定义的为准在样式表中 wins. <p class="a b">...</p> and <p class="b a">...</p>根据定义顺序，样式将相同.a and .b.