html - 为什么不在 <li> 中阻止 <a> 接受 css 文件中设置的颜色？

Question

我想了解如何更改“li”元素中“a”标签的颜色。我有以下无序列表:

<nav class="navbar navbar-default navbar-fixed-top">
  ...
  <ul class="nav navbar-nav navbar-left">
    <li><a href="#">About</a></li>
    <li><a href="#">Blog</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
  ...
</nav>

为什么下面的工作:

.navbar-default .navbar-nav li a {
  color: #333333;
}

.navbar-default .navbar-nav li a:hover {
  color: #EC5216;
}

但不是:

li a {
  color: #333333;
}

li:hover a {
  color: #EC5216;
}

也不是:

a {
  color: #333333;
}

a:hover {
  color: #EC5216;
}

我已阅读 this post ，但目前还不清楚。提前感谢您的回答!

Answer 1

选择器上有一个被计算的层次结构。您放置的选择器越多，它定义的样式在层次结构中的位置就越高。

比方说你只使用

a {
 style....
}

这个a的总权重是5。

但是如果你做一个

.class a {
 style...
}

.class 还有另外 5 个，所以 5+5 = 10 并且具有更高的优先级。

您可以通过将 !important 放在较低层级的语句中来测试这一点。

看这里 https://www.smashingmagazine.com/2007/07/css-specificity-things-you-should-know/