<分区>
css - 第 N 个子列表显示错误
标签 css
我有这个代码
<ul id="task-ul">
<li><a>Personal</a></li>
<li><a href="">Meetings</a></li>
<li><a href="">Email/call</a></li>
<li><a href="">Follow up</a></li>
</ul>
CSS
#task-ul li a:nth-child(1){
border-bottom: 2px solid blue;
}
#task-ul li a:nth-child(2){
border-bottom: 2px solid aqua;
}
#task-ul li a:nth-child(3){
border-bottom: 2px solid yellow;
}
但是它们都是蓝色的，可能是什么问题
最佳答案
您需要针对选择器中的不同列表项，而不是链接
#task-ul li:nth-child(1) a {
border-bottom: 2px solid blue;
}
#task-ul li:nth-child(2) a {
border-bottom: 2px solid aqua;
}
#task-ul li:nth-child(3) a {
border-bottom: 2px solid yellow;
}
实际上你的 CSS 正试图匹配这个标记结构
<ul id="task-ul">
<li>
<a>Personal</a>
<a href="">Meetings</a>
<a href="">Email/call</a>
</li>
</ul>
这就是为什么你的选择器不能像你期望的那样工作(第一个除外)
关于css - 第 N 个子列表显示错误，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/58166903/