Question

我正在尝试创建自定义引导程序navbar，这基本上扩展了引导程序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(line no.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）来覆盖样式。

Answer 2

我发现了这个问题，

如果你看一下我在问题中发布的图片，我注意到它覆盖了原生bootstrap CSS的颜色。所以我决定将我的CSS更改为：

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

我认为发生的事情是谷歌浏览器在元素上保持:hover状态，即使光标未在元素上方。这似乎解决了这个问题。

Google Chrome浏览器无法渲染背景色

2 个答案: