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

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

您的CSS设置锚的宽度样式，因此更改li的宽度是徒劳的。你真的想在第一个li下选择锚点，比如：

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

Answer 2

您可以简单地使用.nav > li:first-child（first-child比其他答案中的解决方案具有更好的浏览器支持）。

jsFiddle在这里

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

jsFiddle在这里

---

旁注：如果你愿意，你可以省略直接子选择器（>），我只是倾向于在可能的时候使用它，因为我认为它稍微快一点（不是很明显）。

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{}