如何确保悬停时覆盖颜色？

Question

HTML：

<div class="hovertest" style="background-color: #fff">
    Test 1
</div>
<div class="hovertest" style="background-color: #eee">
    Test 2
</div>

CSS：

.hovertest:hover {
     background-color: #000;
}

由于内联颜色样式的特异性较高，因此不会应用悬停颜色。如果我给div一个ID并在ID样式中应用它们各自的颜色，也会出现同样的问题。我希望在两个div（或更多）之间共享悬停颜色定义，同时在非悬停时显示其独特的颜色。这可能没有很多冗余的CSS吗？

Answer 1

通过在值之后设置!important，可以超过CSS中其他声明的任何特异性。只有使用!important的另一个声明才能覆盖这一点。

.hovertest:hover {
    background-color: black !important;
}

#hovertest:hover {
    background-color: red; /* Even using an ID won't override `!important` */
}

但要小心！在CSS中使用!important会导致一些非常棘手的问题。以尽可能避免使用CSS的方式编写CSS通常更有用。

请勿使用!important 被动，请使用预防。