导航栏的伪 class 不起作用

Question

所以我有一个简单的导航栏，但由于某种原因无法正常工作。除此链接和页面外，所有其他链接和页面均有效，我想知道是否有人能够发现以下代码中的错误。注意 'glob' 不是黄色的。我以为我在其他地方有一个更具体的规则，它覆盖了那个规则，但我不认为我有这样的规则，我只有不太具体。

#subnav {
 height: 10%;
 text-align: center;
 background-color: green;
 width: 100%;
}
#subnav ul {
 list-style-type: none;
 margin: 0;
 padding: 0;
 overflow: hidden;
 text-align: center;
 width: 100%;
 font-weight: bold;
}
#subnav li {
 display: inline-block;
}
#subnav li a {
 display: block;
 color: white;
 text-align: center;
 padding: 14px 16px;
 text-decoration: none;
}
#subnav li a:hover {
 color: yellow;
}
#subnav li a:active {
 color: yellow;
}

<div id="subnav">
            <ul>
       <li> <a href="sam.html">Sam </a></li>
          <li> <a href="sam.html">Sam </a></li>
       <li> <a href="sam.html">Sam </a></li>
       <li> <a href="sam.html">Sam </a></li>
             <li> <a href="sam.html">Sam </a></li>
                <li> <a href="sam.html">Po </a></li>
                <li> <a class="active" href="glob.html">Glob </a></li>
                <li> <a href="sam.html">Donors </a></li>
                
      </ul>
       </div>

Answer 1

如果你想定位活跃 class，你必须使用 .active，而不是 :active

因此规则将是：

#subnav li a.active {
  color: yellow;
}

:active 伪选择器的工作原理有点不同，这里有一个很好的解释 https://css-tricks.com/almanac/selectors/a/active/ 但是在您的代码中，您正在添加活动的 class，而不是稍后在 css 上使用它。希望对你有帮助。

Answer 2

.active 在您的情况下是 class，而不是可以通过伪选择器寻址的状态。所以你的选择器必须是

#subnav li a.active {
        color: yellow;
    }

（注意 . 而不是 :）

#subnav {
 height: 10%;
 text-align: center;
 background-color: green;
 width: 100%;
}
#subnav ul {
 list-style-type: none;
 margin: 0;
 padding: 0;
 overflow: hidden;
 text-align: center;
 width: 100%;
 font-weight: bold;
}
#subnav li {
 display: inline-block;
}
#subnav li a {
 display: block;
 color: white;
 text-align: center;
 padding: 14px 16px;
 text-decoration: none;
}
#subnav li a:hover {
 color: yellow;
}
#subnav li a.active {
 color: yellow;
}

<div id="subnav">
            <ul>
       <li> <a href="sam.html">Sam </a></li>
          <li> <a href="sam.html">Sam </a></li>
       <li> <a href="sam.html">Sam </a></li>
       <li> <a href="sam.html">Sam </a></li>
             <li> <a href="sam.html">Sam </a></li>
                <li> <a href="sam.html">Po </a></li>
                <li> <a class="active" href="glob.html">Glob </a></li>
                <li> <a href="sam.html">Donors </a></li>
                
      </ul>
       </div>

导航栏的伪 class 不起作用

Pseudo class for navbar not working

html

css

navbar