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是伪类。但是您要选择{strong>也具有 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 Class selectors

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>

请记住The :hover CSS pseudo-class

：hover CSS伪类在用户与带有指点设备的元素，但不一定激活它。通常，当用户将鼠标悬停在光标（鼠标指针）。

并避免使用!important，您可以详细了解!important_exception here

Answer 3

为什么不激活，但激活了 CLASS

代替a:active使用.active进行引用，在这种情况下，您还可以阅读有关选择器HERE的更多信息

Answer 4

我认为应该是这样的：

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

如何将活动的CSS类添加到菜单项？

4 个答案: