Question

当我将鼠标悬停在导航栏上的标签/链接上时，我想覆盖字体颜色。我目前有以下HTML：

<div class="navbar navbar-fixed-top">
    <div class="navbar-inner">
        <div class = "container">
            <a class="brand" href="#">Title</a>
            <ul class="nav">
                <li class="active"><a href="#">Home</a></li>

            </ul>
            <ul class ="nav pull-right">
                <li><a href="#">Link</a></li>

                <li class="divider-vertical"></li>
                <li ><a href="#">Link</a></li>
            </ul>
        </div>
    </div>
</div>

我只想让右侧的标签变成另一种颜色。我理解伪选择器，我只是想知道我是如何用我自己的CSS正确地做到这一点的。谢谢！

Answer 1

如果选择器足够具体，则可以避免使用!important。在这种情况下，您将使用：

.nav.pull-right > li > a:hover {
    /* style .. */
}

jsFiddle example

或者，您也可以使用.navbar-inner .container .nav.pull-right > li > a:hover

覆盖Bootstrap悬停在导航栏上

1 个答案: