html - 边框没有出现在每个类(class)的顶部

Question

我正在使用 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”部分上方，但不在任何后续部分上方。有什么建议么？谢谢!

Answer 1

问题是 .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>