为何链接上的active类样式无法生效？

你的问题核心是CSS选择器用错了——你写的li a:active是CSS的**:active伪类**，它仅作用于链接被点击的瞬间状态，而非你在HTML里给标签设置的.active类。要匹配HTML中手动添加的class="active"，必须使用类选择器.active。

修正后的CSS代码 #

body {
    background-color: black;
    font-family: Lato, Helvetica, sans-serif;
    color: white;
}
li a {
    display: block;
    color: white;
    margin: 14px 16px;
    padding: 2px;
    text-decoration: none;
    letter-spacing: 0.235px;
}

li a:hover {
    color: #EE6C4D;
}

/* 改用类选择器，匹配HTML中的active类 */
li a.active {
    color: #EE6C4D;
}

额外说明 #

• 类选择器必须以.开头，li a.active的优先级高于基础的li a，能确保覆盖默认的白色文字样式。
• 如果需要同时保留链接被点击瞬间的高亮效果，可以同时保留两个选择器：

  /* 链接被点击时的瞬间状态 */
  li a:active {
      color: #EE6C4D;
  }
  /* 当前页面的持久高亮状态 */
  li a.active {
      color: #EE6C4D;
  }
  

内容的提问来源于stack exchange，提问作者Nikhat