html - CSS 后代选择器 : Some Work While Some Do Not

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;
}

那么代码就不起作用了。

如果我想在任何地方有一个带有“selected”类的 anchor 元素以具有 #000 怎么办？

Answer 1

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

含义:

nav a.selected {
  color: #000;
}

不像:

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

比上面的更有意义。

因此，为了使您的 a.selected 正常工作，您需要删除它之前的 nav，使其成为全局 调制器就像您应用到全局 anchor 调制器的颜色一样，或者应用上面的更具体的选择器(第二个 block ):

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

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