更改悬停时边框和链接的颜色

Question

我想在悬停时同时更改边框和链接的颜色。我曾尝试在nav ul li a:hover 上使用border-bottom: 2px solid #000;，但问题是如果链接处于活动状态，即使悬停它也会保持红色。

CSS：

nav ul li {
    display: inline-block;
    margin: 0 10px;
}
nav ul li a {
    color:red;
    text-decoration:none;
}
nav ul li a:hover {
    color: #000;
}
nav ul li a.active {
    border-bottom: 2px solid red;
}

HTML：

<nav>
    <ul>
        <li><a class="active" href="#">Home</a>
        </li>
        <li><a href="#">About</a>
        </li>
        <li><a href="#">Contact Us</a>
        </li>
    </ul>
</nav>

JSFiddle Demo

Answer 1

由于样式表的级联性质，以及选择器共享相同specificity 的事实，后一种样式会覆盖它。您可以像这样更改选择器的顺序：

Updated Example

nav ul li a.active {
    border-bottom: 2px solid red;
}
nav ul li a:hover {
    color: #000;
    border-bottom: 2px solid #000;
}

或者，您也可以通过简单地删除元素类型 a -> nav ul li .active 来减少 nav ul li a.active 的 specificity。 (example)