html - 谷歌浏览器不呈现背景色

Question

我正在尝试创建一个自定义 Bootstrap navbar，这基本上是在扩展 Bootstrap navbar 的功能。

以下是 navbar 代码的摘录(我没有粘贴所有代码，因为它变得很长，其他代码可能无法帮助解决问题。我可以确认所有 div 和元素都关闭了。)

echo "<div class='navbar navbar-app navbar-static-top'>";
    echo "<div class='navbar-header'>";
        echo "<ul class='nav navbar-nav navbar-expand-menu'>";
            echo "<li>";
                echo "<a href='#' id='minimize-side-bar'>";
                    echo "<i class='fa fa-ellipsis-v'></i>";
                echo "</a>";
            echo "</li>";
        echo "</ul>";
    echo "</div>";

基本上，当您单击 minimize-side-bar 链接然后单击离开页面时会发生什么(以便它保持元素的状态为 :focus) 它不保留背景颜色的样式(见下图)。

我已经检查了 chrome 开发者工具 (DT) 以查看哪个 CSS 规则覆盖了背景颜色，但根据 DT，该规则正在应用。

是我的 CSS 有问题还是 chrome 的问题？

Answer 1

很高兴您发现了问题，但只是对您所说的内容进行了小幅更正，这将有助于您更好地理解它:-)

首先，元素上的 :hover 状态不是由 Google Chrome 设置的，而是由 bootstrap.min.css(第 5 行) 设置的。浏览器只是应用样式表上设置的规则。如果您只需单击带下划线的 bootstrap.min.css:5，您将能够看到值的确切来源。

其次最重要的是，您不一定需要提供 !important 参数。如果您想将样式覆盖为您自己的样式，您需要做的就是提及要覆盖它的选择器的确切路径。

代替

.navbar-header li a:focus,
.navbar-header li a:active {
    background-color: #5ecdde !important;
}

在你的styles.css中，你需要给

.nav > li > a:focus,
.nav > li > a:active {
    background-color: #5ecdde;
}

基本上在 bootstrap.min.css(蓝色高亮框)中使用相同的路径(.nav > li > a)来覆盖样式。