Question

I am trying to understand how to change color of "a" tags within "li" elements. I have the following unordered list:

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

Why does the following work:

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

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

But not:

li a {
  color: #333333;
}

li:hover a {
  color: #EC5216;
}

nor:

a {
  color: #333333;
}

a:hover {
  color: #EC5216;
}

I have read 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/

Answer 2

那是因为

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

请阅读有关CSS特异性的更多信息.. https://developer.mozilla.org/en/docs/Web/CSS/Specificity

为什么不阻止<a> within </a> <li> <a> accept color set in css file?

2 个答案: