我正在使用 jquery 包“listnav”来生成按字母顺序排列的列表。呈现的 HTML 将每个字母分成一个特定的类:
<ul id="myList">
<li class="ln-a">
<a href="#">A text</a>
</li>
... more 'A' items ...
<li class="ln-b">
<a href="#">B text</a>
</li>
</ul>
我正在尝试使用第一个子选择器在每个字母“部分”的顶部应用边框:
.ln-a:first-child{
border-top:1px white solid;
}
.ln-b:first-child {
border-top:1px white solid;
}
我的边框位于“A”部分上方,但不在任何后续部分上方。有什么建议么?谢谢!
最佳答案
问题是 .ln-b:first-child
匹配类为 ln-b
的元素,这些元素是其父元素的第一个子元素。
在您的情况下,第一个 child 只有 ln-a
类,因此没有匹配项。
你想要的是某种:first-of-class
,但那不存在。
但是,您可以为所有 .ln-b
元素设置样式,然后为那些不是第一个的元素移除它们:
.ln-b { /* Set styles */ }
.ln-b + .ln-b { /* Remove styles */ }
.ln-a,
.ln-b {
border-top: 1px black solid;
}
.ln-a + .ln-a,
.ln-b + .ln-b {
border-top: none;
}
<ul id="myList">
<li class="ln-a"><a href="#">A text</a></li>
<li class="ln-a"><a href="#">A text</a></li>
<li class="ln-b"><a href="#">B text</a></li>
<li class="ln-b"><a href="#">B text</a></li>
</ul>
关于html - 边框没有出现在每个类(class)的顶部,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31122363/