样式单引导 3 导航下拉链接答案

【问题标题】：style single bootstrap 3 nav dropdown link样式单引导 3 导航下拉链接
【发布时间】：2014-05-07 16:11:49
【问题描述】：

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

我的 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]

【问题讨论】：

@Justin：我不这么认为。看起来您更改了子项的背景颜色，但父子链接颜色没有更改...？我看到您为所有下拉锚点指定了蓝色，但这似乎并没有改变链接颜色...
@MTAdmin 这里有一些选择器 - jsfiddle.net/XXkd6 让我知道你在寻找什么，我会发布答案。
@Josh Crozier 嗯，我想我只是在寻找 .highlight a{color:#xxx}。不过，你的帖子帮助我到达了那里。发布您的子链接代码（.donations a:link{color:#xxx}），我会给您答案。

标签： css twitter-bootstrap-3

【解决方案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 {
    /* ... */
}

【讨论】：