css - style single bootstrap 3 导航下 zipper 接

Question

我有以下 Bootstrap3 导航菜单 ( fiddle here )。我想设置“突出显示”项及其子链接与下拉列表 1 和 2 链接不同的链接文本(和悬停)的样式。我还希望能够以不同于 Highlight 父链接的方式设置子链接(和悬停)的样式。我可以设置背景样式(如图所示)，但我无法为链接找到正确的样式。建议？

我的 HTML:

<div class="container">

    <!-- Static navbar -->
    <div class="navbar navbar-inverse" role="navigation">
        <div class="container-fluid">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                    <span class="sr-only">Toggle navigation</span>


                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="#">Project name</a>
            </div>
            <div class="navbar-collapse collapse">
                <ul class="nav navbar-nav">
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown 1<b class="caret"></b></a>
                        <ul class="dropdown-menu">
                            <li><a href="#">Action</a></li>
                            <li><a href="#">Another action</a></li>
                            <li><a href="#">Something else here</a></li>  
                        </ul>
                    </li>
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown 2<b class="caret"></b></a>
                        <ul class="dropdown-menu">
                            <li><a href="#">Action</a></li>
                            <li><a href="#">Another action</a></li>
                            <li><a href="#">Something else here</a></li>
                        </ul>
                    </li>
                    <li class="dropdown highlight">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown">Highlight<b class="caret"></b></a>
                        <ul class="dropdown-menu">
                            <li><a href="#">Action</a></li>
                            <li><a href="#">Another action</a></li>
                            <li><a href="#">Something else here</a></li>
                        </ul>
                    </li>                
                </ul>
            </div><!--/.nav-collapse -->
        </div><!--/.container-fluid -->
    </div>

</div> <!-- /container -->

我的 CSS:

![@import url('http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css');

.highlight{ background-color:#eeaf41;}
.highlight a {
    font-weight:bold;

}
.highlight a:hover {

    background-color:#FFA;

}.highlight a:active {
    position:relative;
    top:1px;
    color:#999;
}
.dropdown-menu li a {color:#900000}][2]

Answer 1

您可以从以下几个选择器中进行选择。他们确保通过使用 specificity 来覆盖其他样式。考虑到。此外，他们还利用 child combinator, > ，以便仅设置直接同级元素的样式(以防嵌套更多元素)。

Example Here

打开/关闭时 .highlight 元素的选择器，分别为:

.nav.navbar-nav .highlight.open > a,
.highlight {
    /* ... */
}

悬停时 .highlight 元素的选择器:

.nav.navbar-nav .highlight > a:hover {
    /* ... */
}

直接子 ul 元素(子菜单元素)的选择器:

.nav.navbar-nav .highlight > ul {
    /* ... */
}

用于在悬停时设置子菜单元素样式的选择器:

.navbar-nav .highlight.open .dropdown-menu > li > a:hover {
    /* ... */
}