最近，在制作一些遗留代码时，我不得不弄清楚如何在不使用!important的情况下覆盖ID选择器样式。
CSS类似于此
<div id="parent">
<div class="child">Content</div>
</div>
<style>
/* specificity 100 + 10 = 110 */
#parent .child {
color: red;
}
/* specificity 10 */
.child {
color: yellow;
}
</style>
这会导致带有红色的文本，但就我而言，我需要使文字变黄。
通常，我只会重构CSS和HTML，但是在这种情况下，由于某些遗产代码，我无法更改CSS的HTML和顺序。
简单的解决方案是使用臭名昭著的!important关键字来覆盖所有内容，但是我不想那样走。
使用属性选择器
更好的方法是将ID选择器更改为属性选择器。代替#parent，可以使用[id="parent"]。这具有与类选择器相同的特异性。
现在而不是特异性110，它归结于20。
/* specificity 10 + 10 = 20 */
[id="parent"] .child {
color: red;
}
/* specificity 10 */
.child {
color: yellow;
}
用自己链接选择器
现在，我不得不将.child特异性提高到20以上才能击败[id="parent" .child"选择器。实现这一目标的一种方法是链链选择器。
.child的特异性为10。.child.child.child的特异性为30。
<div id="parent">
<div class="child">Content</div>
</div>
<style>
/* specificity 10 + 10 = 20 */
[id="parent"] .child {
color: red;
}
/* specificity 10 + 10 + 10 = 30 */
.child.child.child {
color: yellow;
}
</style>
这是一种颠簸特异性的简便方法，而无需添加其他类或了解将要放置该项目的上下文。
我发现这比使用!important更好，但它仍然是一个黑客。如果可能的话，请尝试避免这种情况。