Question

我有以下简化的navbar（Bootstrap 3.1）：

<div id="top-navbar" class="navbar navbar-default center navbar-fixed-top" role="navigation">
    <div class="container">
        <div class="navbar-header"><!-- button to expand navbar on mobile devices -->
            <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>
        </div>
        <div class="collapse navbar-collapse navbar-inner">
            <ul class="nav navbar-nav">
                <li><a href="#">Demo</a></li>
                <li><a href="#">Purchase</a></li>
                <li><a href="#">Docs</a></li>
                <li><a href="#">Support</a></li>
            </ul>
        </div><!--/.nav-collapse -->
    </div><!--/.container -->
</div><!--/.navbar -->

我已经花了好几个小时才找到正确的CSS选择器来设置包含<li>链接的所有，但我无法弄明白。

有人可以提供正确的选择器吗？

Answer 1

试试这个：

$('.navbar').find('li:lt(2)')

或使用contains：

$('.navbar').find("li:contains('Demo')")
$('.navbar').find("li:contains('Purchase')")

Answer 2

您是否需要在CSS代码中使用选择器，然后您可以使用以下内容：

 .navbar-nav > li:nth-child(1), .navbar-nav > li:nth-child(2) > a { ---your style goes here--- }

或者您也可以使用：

.navbar-nav > li:nth-of-child(1), .navbar-nav > li:nth-of-child(2) > a { ---your style goes here--- }

Answer 3

#top-navbar .navbar-nav li a:link,
#top-navbar .navbar-nav li a:visited{

  /*Default styles of the links*/

}

#top-navbar .navbar-nav li a:hover{

 /*Hover state styles*/

}

如何在Bootstrap的Navbar中定位此<li>元素？</li>

3 个答案: