html - 选择导航栏中的第一个 <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 样式设置了 anchor 的宽度，因此更改 li 的宽度是徒劳的。您确实想选择第一个 li 下的 anchor ，例如:

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