时间戳

首页 > 解决方案 > CSS 中的活动类

html - CSS 中的活动类

问题描述

由于某种原因，活动类对我的页面没有任何影响。非常感谢有人偷看并解释为什么不这样做。

.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 和其他示例来看，它应该可以正常工作，但由于某种原因，在这种情况下，活动课程似乎并没有受到影响。悬停伪类有效，但不是我在不同列表元素中手动键入的活动类。

标签： htmlcss

解决方案

请阅读CSS 特性。

选择器上的规则.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>

推荐阅读