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

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 反应性，使用它预防性。