如何将活动 css class 添加到菜单项？

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是一个伪 class。 但是你想要 select a标签，它也有.active class。

 .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

使用 ZC7A62 8CBA22E28EB17B5F5C6AE2A266AZ Class 选择器

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

 .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 伪类

The:hover CSS 伪类匹配当用户使用指针设备与元素交互但不一定激活它时。 它通常在用户使用 cursor（鼠标指针）悬停在元素上时触发。

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

Answer 3

为什么它不活动，但有活动CLASS

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

Answer 4

我想，应该是这样的：

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