html - CSS 中的事件类

Question

这个问题已经有答案了:

How are the points in CSS specificity calculated (7 个回答)

上个月关闭。

由于某种原因，事件类对我的页面没有任何影响。如果有人能看一下并解释为什么不可以，我将非常感激。

.nav-item {
  display: inline;
  list-style: none;
  margin-left: 40px;
}

.nav-item a {
  font-size: 30px;
  text-decoration: none;
  color: white;
}

.nav-item a:hover,
.active {
  color: #f3ef36;
}

<header id="header">
  <nav>
    <ul class="nav">
      <li class="nav-item"><a class="active" href="#">Hem</a></li>
      <li class="nav-item"><a href="meny.html">Meny</a></li>
      <li class="nav-item"><a href="kontakt.html">Kontakt</a></li>
    </ul>
  </nav>
</header>

从我检查过的 w3schools 和其他示例来看，它应该可以正常工作，但由于某种原因，事件类似乎在这种情况下并没有发挥作用。悬停伪类有效，但不适用于我在不同列表元素中手动键入的事件类。

Answer 1

请阅读CSS specificity .

选择器 .nav-item a 上的规则始终优先于 .active。

您需要提高特异性，例如像这样a.active

请参阅下面的代码片段:

header {background:#000}

.nav-item {
  display: inline;
  list-style: none;
  margin-left: 40px;
}

.nav-item a {
  font-size: 30px;
  text-decoration: none;
  color: white;
}

.nav-item a:hover,
a.active {
  color: #f3ef36;
}

<header id="header">
  <nav>
    <ul class="nav">
      <li class="nav-item"><a class="active" href="#">Hem</a></li>
      <li class="nav-item"><a href="meny.html">Meny</a></li>
      <li class="nav-item"><a href="kontakt.html">Kontakt</a></li>
    </ul>
  </nav>
</header>