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选择器，它将使用类“box”选择div下的每个第6个<li>标记。但我需要选择器考虑页面中的整个<li>标记，而不是按<ul>标记计算它们。所以最后，选择器应该选择ID为6,12,18的<li>。目前我只能创建一个选择ID 6＆amp;的选择器。 15我用的时候：

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

注意1：仅添加ID号以供参考。实际上，<li>标记没有类或ID。
注意2：每个<li>代码中的<ul>代码数量因网站部分而异。有时甚至可能会有第3和第4 </ul>个<li>个标记。
注意3：我无法控制硬编码的HTML，这意味着我无法统一标签，添加ID或CSS类等。选择器将从外部JS调用文件。虽然我可以在页面加载后使用jQuery编辑DOM，但我更愿意避免使用这样的解决方案来使选择器更容易处理。

由于

Answer 1

一般同意不可能，除了......

我基本同意Sych和Fabrício的说法，目前无法将其作为纯CSS解决方案。但是，总会有一些例外，具体取决于实际的html结构。

在您的情况下，可能是一个例外，但它确实取决于您的情况的完全限制。

什么时候可能？

根据您给定的代码，如果这两个约束条件成立，那么您仍然可以通过CSS得到您想要的代码：

ul的直接子项的所有.box项都属于.gallery类。
所有图库组（除了最后一个图库组）都包含九个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中所示（注意最后两个选定文本之间的差异是不是因为倒数第二个.gallery只有7个项目。）

总体原则

所以一般来说，如果你的动态html是在某种类型的常规模式中输出的，那么它就可以开辟一条纯css解决方案的可能性。当动态生成也是完全随机的（因此在你的情况下，如果上面的＃1或＃2条件不能保证为真），纯css解决方案是不可能的。

Answer 2

nth-child和nth-of-type仅根据元素相对于其兄弟姐妹的位置进行匹配。

据我所知，除非所有li具有相同的父级，否则目前没有仅限CSS的解决方案。您必须为每个第6个元素添加一个类或使用一些JavaScript。

因此，仅在不改变标记且不对第n个起始索引进行硬编码的情况下限制CSS选择器的答案：不可能。我希望被证明是错的。

从好的方面来看，添加一个类将提供更好的选择器性能。 nth-child已经被认为是低效的，现在如果你想要的话，它意味着浏览器将被强制递归评估选择器并在每次更新DOM时计算匹配。虽然这将是非常糟糕的性能，但我相信它仍然可以通过新的“范围”第n选择器和CSS计数器来实现。只是值得深思。

Answer 3

CSS没有提供这样的范围，它只提供遍历“更深入到DOM”树的遍历。它甚至没有父元素选择器。

如果你在jQuery环境中，你可以编写自己的选择器，称之为“：nth-from-top（n）”，它将使用jQuery的DOM遍历函数。

请注意，这种类型的选择器会慢得多，因为它无法利用本机DOM方法提供的性能提升。

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

3 个答案:

一般同意不可能，除了......