深入了解CSS选择器的优先级与特异性
P粉036800074
2023-08-22 22:06:31
<p>我想了解CSS选择器在属性冲突中是如何工作的。一个属性如何被选择而不是另一个属性?</p>
<p><br /></p>
<pre class="brush:css;toolbar:false;">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;
}</pre>
<pre class="brush:html;toolbar:false;"><div id="my_id" class="my_class">hello</div></pre>
<p><br /></p>
<p>选择器的优先级是如何工作的?</p>
按顺序,1是最低的特定性,5是最高的。 https://youtu.be/NqDb9GfMXuo将显示详细信息以进行演示。
我只是在这里添加一个链接到CSS 2.1规范本身,以及浏览器应该如何计算特异性:
CSS 2.1第6.4.3节:
如果特异性相等,则会使用CSS 2.1第6.4.1节:
请注意,这是在样式定义时讨论的,而不是在使用时。如果类
.a
和.b
的特异性相等,则在样式表中最后定义的类将获胜。<p class="a b">...</p>
和<p class="b a">...</p>
将根据.a
和.b
的定义顺序以相同的样式进行设置。