与第一个孩子一起设计 ul答案

【问题标题】：Styling ul with first-child与第一个孩子一起设计 ul
【发布时间】：2018-12-19 11:18:58
【问题描述】：

我确信这应该不难解决，但我无法让我的 ul 样式工作（尝试不同的东西，它要么适用于一个，要么根本不适用），我即将把我的头发扯下来。我错过了什么？

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

【问题讨论】：

谢谢大家，非常感谢！

标签： css css-selectors html-lists

【解决方案1】：

而不是这个

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

使用它

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

【讨论】：

【解决方案2】：

问题是您选择了第一个 a 元素，这总是正确的，因为每个 li 中只有一个 a 元素 元素。相反，您应该选择第一个 li 元素，然后定位嵌套在该 li 中的 a 元素。例如，您的 CSS 应如下所示：

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

查看这个更新的小提琴：https://jsfiddle.net/5cuuq8rq/1/

【讨论】：

【解决方案3】：

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

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

【讨论】：