Question

我确定这不应该难以解决，但我无法让我的样式让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;
}

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

问题在于您选择的第一个 a 元素始终为真，因为每个 li中只有一个 a 元素元素。相反，您应该选择第一个 li 元素，然后定位嵌套在 li 中的 a 元素。例如，您的CSS应如下所示：

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

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

Answer 3

如果你使用nth-child（某个号码）你可以通过给它一个数字来指定你将要设计的样式，首先是1，依此类推:)祝你好运。

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

与第一个孩子一起定型ul

3 个答案: