我想了解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规范本身的链接，以及浏览器 应 如何计算特异性：
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（在基数较大的数字系统中）连接起来可得出特异性。
选择器的特异性计算如下：
将四个数字abcd（在基数较大的数字系统中）连接起来可得出特异性。
如果特异性相同，则CSS 2.1第6.4.1节生效：
最后，按指定的顺序排序：如果两个声明的权重，来源和特异性相同，则以后者为准。导入的样式表中的声明被视为在样式表本身中的任何声明之前。
请注意，这里所说的是样式的定义时间，而不是使用时间。如果类.a和.b具有相同的特异性，则以 样式表中 最后定义 的那个 为准。 <p class="a b">...</p>而<p class="b a">...</p> 将同样的风格，根据定义顺序.a和.b。
.a
.b
<p class="a b">...</p>
<p class="b a">...</p>
