Question

我正在尝试选择页面导航栏的第一个<li>元素，这样我就可以将其设置为导航栏中其他项目的一半。

这是我的CSS：

.nav{
    border-width:1px 0;
    list-style:none;
    margin:0;
    padding:0;
    text-align:center;
    padding-bottom: 8px;
    font-size: 11px;
}
.nav li{ display:inline; }

.nav li:first-of-type { width: 50px; }

.nav li a {
    width: 118px;
    height: 30px;
    padding: 8px;
    display:inline-block;
    text-decoration: none;
    color: white;
    background-color:#666666;
    text-align: center;
}

.nav li a:hover { background-color:#555555; }

.nav li.selected a { background-color: #FF731E; }

这是HTML：

<div class="navbar">
    <ul class="nav">
        <li><a href="#">Home</a></li>
        <li><a href="page01.html">Page1</a></li>
        <li><a href="page02.html">Page2</a></li>
        <li><a href="page03.html">Page3</a></li>
        <li><a href="page04.html">Page4</a></li>
        <li><a href="page05.html">Page5</a></li>
    </ul>
</div>

我尝试过各种各样的事情，包括:first-child和:first-of-type，但我似乎无法选择第一项（这将是一个主页图标）。

除非我使用.nav li a:first-of-type使所有项目50px不是我想要的结果，否则什么都不会影响页面。

Answer 1

您可以使用.nav > li:first-child（first-child拥有better browser support而不是其他答案中的解决方案）。

jsFiddle here.

或者，如果您只是想在其中定位锚点，请使用.nav > li:first-child > a。

jsFiddle here.

旁注：如果需要，您可以省略直接子选择器（>），我只是倾向于在可能的情况下使用它，因为我认为它稍微快一点（不是它的引人注目）。

Answer 2

你的CSS调整了锚点的宽度，因此改变li的宽度是徒劳的。你真的想在第一个li下选择锚点，如：

.nav li:first-child a {
  width: 50px;
}

Answer 3

ul.nav li:nth-child(1){your style here}

Answer 4

.nav li:first-of-type a { ... }

Answer 5

要仅选择第一个li项目，请使用此项：

li:nth-child(1) {
    //Your style here 
}

如果您希望所有其他孩子都设置为其他孩子，那么第一个孩子也可以这样做：

li:nth-child(n+2) {
    color: green;   
}

对于造型，只有最后一个孩子才能这样做：

li:last-child {
    //Your style here
}

更多相关信息：http://css-tricks.com/useful-nth-child-recipies/

Answer 6

正如Zenith所说，第一个是最好的选择，因为浏览器支持。

.nav li:first-child a{}

.nav li:nth-child(1) a{}

.nav li:first-of-type a{}

.nav li:nth-of-type(1) a{}

选择导航栏中的第一个<li> </li>

6 个答案: