CSS后代选择器:有些工作，而有些则不起作用

Question

我在该页面上时试图将导航链接样式为某种颜色。

html：

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

CSS：

nav a.selected {
  color: #000;
}

上述代码有效。但是，如果我删除了NAV选择器，并且只使用了

a.selected {
  color: #000;
}

那么代码不起作用。

如果我想要在任何地方都有一个锚定元素，该类别"选择"具有＃000？

Answer 1

这里的问题似乎是您选择器的特异性。

含义：

nav a.selected {
  color: #000;
}

不像：

那样精确

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

具有比上述更重要的意义。

因此，为了使您的a.selected工作，您需要在它之前删除nav，使其成为 global 调制器，就像您应用于全局锚的颜色一样调制器，或从上方（第二个块）应用更具体的选择器：

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

作为学习者，我建议您尝试坚持使用 Mozilla开发人员网络（MDN） ALMANAC。