css - 如何创建选择包含后代的 Xn 标签的 CSS 选择器

Question

假设我有以下 DOM 树:

<div class="box">
<ul class="gallery">
    <li id="1">text</li>
    <li id="2">text</li>
    <li id="3">text</li>
    <li id="4">text</li>
    <li id="5">text</li>
    <li id="6">text</li>
    <li id="7">text</li>
    <li id="8">text</li>
    <li id="9">text</li>
</ul>
<div id="random"></div>
<ul class="gallery">
    <li id="10">text</li>
    <li id="11">text</li>
    <li id="12">text</li>
    <li id="13">text</li>
    <li id="14">text</li>
    <li id="15">text</li>
    <li id="16">text</li>
    <li id="17">text</li>
    <li id="18">text</li>
    <li id="19">text</li>
    <li id="20">text</li>
</ul>
</div>

我想创建一个 CSS 选择器，每 6 次选择一次 <li> div 下的标签，类别为“box”。但我需要选择器考虑整个 <li>页面中的标签，而不是根据 <ul> 计算它们标签。所以最后，选择器应该选择 <li>。 ID 为 6、12、18。目前我只能创建一个选择器，当我使用时选择 ID 6 和 15:

div.box li:nth-of-type(6n)

• 注意1:身份证号仅供引用。实际上 <li>标签没有类或 ID。
• 通知2:<li>的数量每个 <ul> 中的标签标签因站点部分而异。有时甚至可以有第三个和第四个 </ul>更多<li>标签。
• 注意3:我无法控制硬编码的HTML，这意味着我无法统一标签，添加ID或CSS类等。选择器将从外部JS调用文件。虽然我可以在页面加载后使用 jQuery 编辑 DOM，但我更愿意避免这种解决方案，以使选择器更易于处理。

谢谢

Answer 1

大体上同意不可能，除了...

我基本上同意 Sych 和 Fabrício 的观点，即目前不可能作为纯 CSS 解决方案来做。但是，总有一些异常(exception)，这取决于实际的 html 结构。

在您的情况下，可能有异常(exception)，但这确实取决于您的情况的全部限制。

什么时候可以？

根据您给定的代码，如果这两个约束为真，那么您仍然可以通过 CSS 获得您想要的内容:

1. .box 的直接子项的所有 ul 项都属于 .gallery 类。
2. 所有画廊组(也许最后一个除外)都由九个 li 元素组成(您的示例中的两个组都是，但我不知道这是巧合还是您实际情况如何设置您的代码)。

如果您的 html 中的上述两个因素为真，那么此代码将得到您想要的结果(使用 color 在这里显示选择):

ul.gallery:nth-of-type(2n+1) li:nth-of-type(6n) {
    color: red;
}

ul.gallery:nth-of-type(2n+2) li:nth-of-type(6n+3) {
    color: red;
}

您可以看到它对您在 this fiddle 中提供的代码有效 , 然后你可以看到它继续工作给定的 html 扩展为 this fiddle shows ，即使最终列表都缺少九个 this fiddle和 this fiddle shows , 但如果 .gallery 在序列的某个中点长度不同，它将失败，如 this fiddle 中所示(注意最后两个选定的文本彼此之间的距离不是 6，因为倒数第二个 .gallery 只有 7 个元素)。

总体原则

所以一般来说，如果您的动态 html 以某种类型的常规模式输出，如此处所示，那么它可以按照给定的方式打开纯 css 解决方案的可能性。当动态生成也是完全随机的(所以在你的情况下，如果上面的#1 或#2 条件不能保证为真)，纯 css 解决方案是不可能的。