如何定义正确的 CSS 选择器？

Question

我有一个关于 CSS 选择器的问题。如何选择一个正确的？ 例如我有这段 HTML：

<header>
    <nav class="navbar navbar-inverse navbar-fixed-top">
        <div class="container-fluid">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <p style="font-size:1.2em" class="navbar-text">Project name</p>
            </div>
            <div id="navbar" class="collapse navbar-collapse">
                <ul class="navbar-nav nav navbar-right">
                    <li><a style="font-size:1.2em" href="#AboutMe">Text1</a></li>
                    <li><a style="font-size:1.2em" href="#Social">Text2</a></li>
                    <li><a style="font-size:1.2em" href="#Projects">Text3</a></li>
                </ul>
            </div><!--/.nav-collapse -->
        </div>
    </nav>
 </header>

为了让我的列表元素 li 在无序列表 ul 中改变外观，我看到了下一个 CSS 选择器：

.navbar-inverse .navbar-nav > li > a:hover {
  background-color: white;
  color: black;
}

我如何理解这个选择器说：选择所有 li 元素的子元素，而他又是具有 .navbar-nav 类（？）的元素的子元素，以及所有这些内部元素和具有 .navbar-inverse 类的元素(?)。

这很好用。但。如果将此选择器更改为另一个：

li > a:hover {
  background-color: white;
  color: black;
}

这不起作用。但它的意思是：选择了所有 a 元素，它是 li 元素的直接子元素。

也许我不太了解 CSS 选择器的概念。

谢谢。

编辑：
这就是我所有可能影响导航元素的内部 CSS。 谢谢。

/*
Solution from "http://stackoverflow.com/questions/11124777/twitter-bootstrap-navbar-fixed-top-overlapping-site"
*/
body { padding-top: 40px; }
@media screen and (max-width: 768px) {
    body { padding-top: 0px; }
} 

.anchor {
  padding-top:40px;
 }

.navbar-inverse .navbar-nav > li > a:hover {
  background-color: white;
  color: black;
}
.navbar {
  background-color: #444;
  border: 0px;
  letter-spacing: 2px;
  padding-right: 50px;
  padding-left: 50px;
}

Answer 1

好吧，您的问题绝对是特异性之一，因为具有更多特异性的选择器提供了正确的结果。您可以查看 MDN 以了解更多信息，或查看 here at CSS tricks 以了解更多详细信息。但本质上，每个选择器都有一个与其关联的优先级编号，元素的编号最小，内联样式和 !important 的编号最高。 CSS 中的选择器越多，数字就越高。在浏览器中呈现时，较高的数字将覆盖较低的数字。

如果不查看更多 CSS 就很难判断，但如果您的 a 标签或 l 标签有样式，并且上面有类，这将导致您的问题。例如：

.navbar-nav .nav-right a {
    background: blue;
}

仅使用“li > a:hover”会阻止您的悬停生效，因为浏览器采用更高特异性的背景颜色。因此，也许在您的工作表中查看高于此的其他样式。如有疑问，请在 codepen 中尝试一下。