如何将活动的 css 类添加到菜单项?

Question

https://www.bootply.com/XzK3zrPhJJ

在此示例中，为什么Home按钮未标记为红色？

.navbar a:hover,
.navbar a:focus,
.navbar a:active {
color: red !important;
}

<nav class="navbar navbar-expand-lg">
<div class="collapse navbar-collapse">
<div class="nav navbar-nav">
<a href="/index.php" class="active">Home</a>
<a href="#">Links</a>
<a href="#">About</a>
</div>
</div>
</nav>

Answer 1

你不应该使用a:active而是a.active

:after是一个伪类。但是您想选择a标签，该标签也具有.active类。

.navbar a:hover,
.navbar a:focus,
.navbar a.active {
color: red !important;
}

<nav class="navbar navbar-expand-lg">
<div class="collapse navbar-collapse">
<div class="nav navbar-nav">
<a href="/index.php" class="active">Home</a>
<a href="#">Links</a>
<a href="#">About</a>
</div>
</div>
</nav>

Answer 2

使用 css 类选择器

CSS 类选择器根据元素的内容匹配元素 类属性。

.navbar a.active {
color: red;
}

<nav class="navbar navbar-expand-lg">
<div class="collapse navbar-collapse">
<div class="nav navbar-nav">
<a href="/index.php" class="active">Home</a>
<a href="#">Links</a>
<a href="#">About</a>
</div>
</div>
</nav>

请记住，：hover CSS 伪类

：hover CSS 伪类在用户与 元素，但不一定激活它。 它通常在用户将鼠标悬停在元素上时触发 光标(鼠标指针(。

并避免!important您可以在此处阅读有关！important_exception的更多信息

Answer 3

为什么它不活跃，而是有活动的CLASS

而不是a:active使用.active来引用，在这种情况下，您还可以阅读有关选择器的更多信息 这里

Answer 4

我认为应该是这样的：

navbar a:hover {
color:red;
font-weight:bolder;
text-decoration:underline;
}