如何选择除最后一节以外的每个部分的最后一项？

Question

鉴于以下DOM：

<ul>
    <li><a class="section_0">section_1 item_1</a></li>
    <li><a class="section_0">section_1 item_2</a></li>
    <li><a class="section_1">section_2 item_1</a></li>
    <li><a class="section_1">section_2 item_2</a></li>
    <li><a class="section_2">section_3 item_1</a></li>
    <li><a class="section_2">section_3 item_2</a></li>
</ul>

如何选择每个部分的最后一项，从字符串＆＃34;部分_＆＃34;开始，除了最后一部分？
我不想更改DOM结构，因为它定义了子菜单树。

目标是在每个部分下面画一条线。

编辑：或者我可以为每个部分的最后一个元素添加一个特定的类，但我不愿意。

Answer 1

纯粹的css，而不是我所知道的。要选择的标记没有结构差异，只有当你能以某种方式直接在css中迭代它们时，类名才允许这种访问 - 这对我来说听起来像是javascript。

显然他们考虑过css3的contains()选择器，但它不存在。查看Is there a CSS selector for elements containing certain text?问题以供参考。

我认为最好的解决方案就是你建议的，在每个部分的最后一个部分添加一个类名，使其更易读，并且可以用css轻松选择。

Answer 2

按类名定义布局绝对是一个坏主意，如果你可以帮助它，改变布局。

到目前为止，最好的方法是每个部分制作一个ul并执行：

ul:not(:last-child)>li:last-child { color: red; }

使用此标记：

<ul>
    <li><a class="section_0">section_1 item_1</a></li>
    <li><a class="section_0">section_1 item_2</a></li>
</ul>
<ul>
    <li><a class="section_1">section_2 item_1</a></li>
    <li><a class="section_1">section_2 item_2</a></li>
</ul>
<ul>
    <li><a class="section_2">section_3 item_1</a></li>
    <li><a class="section_2">section_3 item_2</a></li>
</ul>

<强> RESULT

Answer 3

您可以尝试li:not( :last-child) > a[class^="section_"]。这应该选择所有a，其类别以＆＃34; section _＆＃34;开头。无论数字如何，但最后li都没有。如果您需要设置包含节链接的li样式，则需要将类移动到li标记，因为CSS选择器当前无法指定＆＃34; parent＆＃34;标签

Answer 4

根据你的例子，我假设项目的数量是静态的，并且所有部分都相同，那么你可以使用这个CSS选择器。

document.querySelectorAll('li:nth-child(2n):not(:last-child)')

• 2n表示每一秒
• :not(:last-child)排除列表中的最后一个元素