使用 first-child 对 ul 进行样式化

Question

我确定这应该不难解决，但我无法让 ul 的样式正常工作（尝试不同的东西，它要么对一个有效，要么对 none 完全无效）我正要撕掉我的头发。我错过了什么？

HTML:

<ul class="nav">
   <li><a href="?page=home">Home</a></li>
   <li><a href="?page=couriers">Couriers</a></li>
   <li><a href="?page=reviews">Reviews</a></li>
   <li><a href="?page=retailers">Retailers</a></li>
   <li><a href="?page=about">About</a></li>
</ul>

CSS:

.nav{   
font-size:18px; 
font-weight: bold;
list-style:none;
margin:0;
padding:0;
text-align:center;
}

.nav li{
display:inline; 
}

.nav a{
width: 144px;
background: -webkit-linear-gradient(rgb(256,256,256), rgb(175,175,175));
background:    -moz-linear-gradient(rgb(256,256,256), rgb(175,175,175));
background:         linear-gradient(rgb(256,256,256), rgb(175,175,175));
text-decoration:none;
display:inline-block;
padding:10px;
 }


.nav li > a:first-child {
border-radius: 20px 0px 0px 0px;
}

Answer 1

而不是这个

.nav li > a:first-child {
    border-radius: 20px 0px 0px 0px;
}

使用它

.nav li:first-child > a {
    border-radius: 20px 0px 0px 0px;
}

Answer 2

问题是您 select 第一个 a 元素总是为真，因为只有一个 a 元素在每个 li 元素中。相反，您应该 select 第一个 li 元素，然后定位嵌套在该 li[=] 中的 a 元素22=]。例如，您的 CSS 应如下所示：

.nav li:first-child > a { border-radius: 20px 0px 0px 0px; }

查看更新后的 fiddle：https://jsfiddle.net/5cuuq8rq/1/

Answer 3

如果你使用nth-child（一些数字）你可以通过给它一个数字来指定你想要的风格，1 代表第一个等等:)祝你好运。

.nav li:nth-child(1) > a {
     border-radius: 20px 0 0 0;
}

使用 first-child 对 ul 进行样式化

Styling ul with first-child

css

css-selectors

html-lists