Question

我有以下Bootstrap3 Nav菜单（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]

Fiddle Image

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 {
    /* ... */
}

style single bootstrap 3 nav下拉链接

1 个答案: