Bootstrap - 无法覆盖伪 class 的属性

Question

我主要是想实现悬停效果。我似乎无法在以下代码中使用伪 class 的属性进行覆盖：

CSS:

    <style type="text/css">
        li:hover
        {
            color: #000000 !important;
            background-color: #ff8c00;
        }
    </style>

HTML:

            <nav class="navbar-inverse">
                    <ul class="nav nav-justified" style="font-size: 1.3em;">
                        <li class="active"><a href="#">Home</a></li>
                        <li><a href="#" style="color:white;">About Us</a></li>
                        <li><a href="#" style="color:white;">Contact</a></li>
                        <li><a href="#" style="color:white;">Sign Up</a></li>
                        <li><a href="#" style="color:white;">Login</a></li>
                    </ul>
        </nav>

如果我从 ul 元素中删除 nav class，悬停功能可以正常工作，但结构看起来真的很难看。我怎样才能让它工作？

更新：

已将我的代码上传到 jsfiddle

Answer 1

您必须像这样指定 css：

  <style type="text/css">
        .nav>li>a:hover
        {
            color: #000000;
            background-color: #ff8c00;
        }
    </style>

这样，class nav 带有直接嵌套的子 li 和带有伪 class :hover 的 a 标签将被选中，bootstrap-标准将被覆盖。

Answer 2

活动的 class 将不起作用，因为规则仅在 :hover 上指定要在活动上也应用样式，您还必须在活动 class 上调用 CSS

.nav>li>a:focus,
.nav>li>a:hover,
.nav>li>a:active
{
    color: #000000;
    background-color: #ff8c00;
}

Bootstrap - 无法覆盖伪 class 的属性

Bootstrap - Cannot override property of pseudo-class

html

css

hover

twitter-bootstrap

Bootstrap - 无法覆盖伪 class 的 属性

Bootstrap - Cannot override property of pseudo-class

html

css

hover

twitter-bootstrap

Bootstrap - 无法覆盖伪 class 的属性