CSS后代选择器：有些工作，有些则不工作

Question

当我在该页面上时，我试图将导航链接设置为某种颜色。

HTML：

 <nav>
    <ul>
      <li><a href="index.html" class="selected">Portfolio</a></li>
    </ul>
  </nav>

CSS：

nav a.selected {
  color: #000;
}

以上代码有效。但是如果我删除了导航选择器并且只是使用了

a.selected {
  color: #000;
}

然后代码不起作用。

如果我想在任何地方拥有一个类＆＃34;选择＆＃34;有＃000？

Answer 1

此处的问题似乎是您的选择器的 特异性 。

含义：

nav a.selected {
  color: #000;
}

不如：

nav ul li a.selected {
  color: #000;
}

比上述更重要。

因此，为了让a.selected能够正常工作，您需要删除之前的nav，使其成为 全局 调制器您应用于全局锚点调制器的颜色，或从上面应用更具体的选择器（第二个块）：

a {
  color: #6ab47b;
}
a.selected {
  color: #000;
}

作为学习者，我建议您尝试坚持 Mozilla Developer Network (MDN) 年历。