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 class（？）以及所有这些内部元素和.navbar-inverse类（？）。

这项工作做得很好。但。如果将此选择器更改为另一个：

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

这不起作用。但它所说的是：选择所有元素都是李元素的直接子女。

或者我可能不太了解CSS选择器的概念。

感谢。

编辑：
这是我所有可能影响nav元素的内部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以了解更多详细信息。但实际上，每个选择器都有一个与优先级相关联的数字，元素的数量最少，内联样式和重要数据最高。 CSS中的选择器越多，数字越大。在浏览器中渲染时，较高的数字将覆盖较低的数字。

如果没有看到更多的CSS，很难分辨，但如果你的标签或l标签上有样式，那么这会导致你的问题。例如：

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

会阻止您的悬停仅使用“li＆gt; a：hover”生效，因为浏览器会采用更高特异性的背景颜色。因此，或许可以在工作表中查看上面的其他样式。如有疑问，请在codepen中尝试。

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

1 个答案: