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的元素。

在您的情况下，第一个孩子只有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>

Answer 2

你忘了关闭＆＃39;列表。

<ul id="myList">
  <li class="ln-a">
    <a href="#">A text</a>
  </li>
  ... more 'A' items ...
</ul>
<ul>
  <li class="ln-b">
    <a href="#">B text</a>
  </li>
</ul>

Answer 3

使用JQuery：

for (Specialization s : Specialization.values()) {
    System.out.println(s.getMenuLetter() + ": " + s.getDisplayName());
}

Specialization[] specializations = Specializations.values();
for (int i = 0; i < specializations.length; i++) {
    System.out.println(specializations[i].getMenuLetter() + ": " + specializations[i].getDisplayName());
}

边界没有出现在每个班级的顶部

3 个答案: