css - Bootstrap - 无法覆盖伪类的属性

Question

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

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 类，悬停功能可以正常工作，但结构看起来真的很难看。我怎样才能让它发挥作用？

更新:

在 jsfiddle 上上传了我的代码

Answer 1

您必须像这样指定 css:

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

这样，类 nav 与立即嵌套的子 li 和 a 标签与伪类 :hover 将被选中， Bootstrap 标准将被覆盖。