css - CSS使悬停覆盖活动类

Question

我想让我的悬停颜色覆盖我的活动类颜色。

这是我的悬停：

.tabs nav a:hover {
    box-shadow: inset 0 -2px #1E528A;
}

这是我的活跃 li 课程：

.tabs nav li.active a {
    box-shadow: inset 0 -2px #3792F5;
}

当我将鼠标悬停在我的活动班级上时，颜色优先。我希望悬停在悬停时优先于我的活动类颜色。我怎样才能做到这一点？

标签： css

Answer 1

你有一个特异性问题。通常，这可以通过在目标元素本身上使用类名来解决，而不是像.tabs nav li.active a. 因此，要解决此问题，您可以.navigation-link为每个<a>元素添加一个类名。一种普遍推荐的避免此问题的 CSS 方法是BEM。看看这个问题：CSS 特异性点