1

我正在尝试选择<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，这不是我的预期结果。

4

6 回答 6

4

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

jsFiddle在这里。

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

jsFiddle在这里。

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

于 2013-06-24T13:41:46.280 回答
4

您的 CSS 设置了锚点的宽度，因此更改 li 的宽度是毫无结果的。您真的想选择第一个 li 下的锚点，例如：

.nav li:first-child a {
  width: 50px;
}
于 2013-06-24T13:42:48.033 回答
1 
ul.nav li:nth-child(1){your style here}
于 2013-06-24T13:41:56.107 回答
1 
.nav li:first-of-type a { ... }
于 2013-06-24T13:43:20.420 回答
1

要仅选择第一个 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/

于 2013-06-24T13:44:41.343 回答
1

正如 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{}
于 2013-06-24T13:48:50.943 回答