除了最后一个部分，如何选择每个部分的最后一个项目？答案

【问题标题】：How to select every last item per section except the last section?除了最后一个部分，如何选择每个部分的最后一个项目？
【发布时间】：2016-05-15 12:26:50
【问题描述】：

给定以下 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>

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

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

编辑：或者，我可以在每个部分的最后一个元素中添加一个特定的类，但我不希望这样做。

【问题讨论】：

更正：li:last-child > a 选择每个部分的最后一项。
您必须在标题部分定义类或将其定义为导入文件，然后才能按名称调用类。我以为你已经这样做了。
似乎没有你想要的纯 CSS 实现，而不必像你建议的那样在每个部分的最后一项中添加一个类。至少在CSS selectors level 4 实施之前不会。请参阅this post 中的 cmets。
@timolawi 好吧，那太糟糕了。
每个部分有多少个<li>？您可以将document.querySelectorAll('li:nth-child(2n):not(:last-child)') 用于每个部分的两个项目。

标签： css css-selectors

【解决方案1】：

使用纯 css，我不知道。要选择的标记没有结构上的差异，并且类名只有在您可以以某种方式直接在 css 中迭代它们时才允许这种访问 - 这对我来说听起来像 javascript。

显然他们想到了一个用于 css3 的 contains() 选择器，但它不存在。检查Is there a CSS selector for elements containing certain text?问题以供参考。

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

【讨论】：

感谢参考，我用另一种方式解决了。

【解决方案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>

结果

【讨论】：

我不想根据用例的样式要求更改 DOM 结构。

【解决方案3】：

你可以试试li:not( :last-child) > a[class^="section_"]。这应该选择所有a，其类以“section_”开头，无论数字如何，但不是最后一个li。如果您需要设置包含部分链接的li 样式，则需要将类移动到li 标记，因为CSS 选择器目前不能指定“父”标记。

【讨论】：

【解决方案4】：

鉴于您的示例，我假设所有部分的项目数是静态的并且相同，那么您可以使用此 CSS 选择器。

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

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

【讨论】：