如何创建选择Xn标记（包括子体）的CSS选择器

假设我有以下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>

• 注意1:添加的ID编号仅供参考。实际上，
  标记没有类或ID
• 注意事项2:每个
  标签中的
  标签数量因现场区域而异。有时甚至会有第三个和第四个

，带有更多的

标签

注意3:我无法控制硬编码的HTML，这意味着我无法统一标签、添加ID或CSS类等。选择器将从外部JS文件调用。虽然我可以在页面加载后使用jQuery编辑DOM，但我宁愿避免使用这种解决方案，以使选择器更易于处理

感谢

并基于元素相对于其同级的位置进行匹配

据我所知，目前还没有CSS唯一的解决方案，除非所有

li

s都有相同的父对象。您必须为每6个元素添加一个类或使用一些JavaScript

因此，仅在不改变标记和不硬编码第n个开始索引的情况下将答案约束到CSS选择器：不可能。但我希望被证明是错的

---

从好的方面来看，添加类将提供更好的选择器性能<代码>第n个子项已经被认为是低效的，现在如果您想要的是可能的，那么这意味着浏览器将被迫递归地计算选择器，并在每次更新DOM时计算匹配项。虽然这在性能方面会很糟糕，但我相信通过新的“作用域”第n个选择器和CSS计数器仍然可以实现。值得思考。

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

如果您在jQuery环境中，您可以编写自己的选择器，调用它，比如说，“：nth from top（n）”，这将使用jQuery的DOM遍历函数工作

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

一般认为不可能，除非。。。 我基本上同意Sych和Fabricio的观点，即目前不可能将其作为纯CSS解决方案。但是，根据实际的html结构，总会有一些例外情况

在您的情况下，可能会有例外，但这取决于您的情况的全部约束

什么时候可能？

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

所有

ul

项目都是

.box

的直接子项，属于

.gallery

类

所有库组（除了最后一个）都由九个

li

元素组成（在您的示例中，两个组都有，但我不知道这是否是巧合，也不知道您实际上是如何设置代码的）

如果html中的上述两个因素为真，则此代码将获得您想要的内容（使用

颜色

在此处显示选择）：

您可以看到它对您提供的代码起作用，然后您可以看到它在html扩展为的情况下继续起作用，即使最终列表缺少9个as和，但如果

.gallery

在序列的某个中点长度发生变化，它将失败，如中所示（请注意，最后两个选定的文本之间的间隔不是6，因为倒数第二个

.gallery

只有7项）

首要原则

---

因此，一般来说，如果您的动态html以此处演示的某种常规模式输出，那么它就可以提供一种纯css解决方案的可能性，这种解决方案可以遵循给定的思路。在动态生成也是完全随机的情况下（在您的情况下，如果上面的#1或#2条件不能保证为真）纯css解决方案是不可能的。

元素的数量是固定的还是动态的？它们是动态的，我添加它们只是为了参考和澄清问题。我将添加一个通知。

标记的数量是随机的。不是随机的，但因网站的不同部分而异，这意味着e是模式，但有几种。我会添加一个关于这一点的通知。感谢您为fiddle付出的额外努力，如果我得不到更灵活的解决方案，我会选择您的答案。只要每个都是“常规模式”（正如我提到的），使用有限数量的模式，然后您可以得到一个纯css解决方案。如果您的网站多种多样，您可能需要在

.box

div中添加一个类，告诉css什么是“模式”该框在后面，因此

.nine

或

.seven

然后通过将该类附加到选择器来配置各种css模式（因此在上面的示例中，选择器可能是

.nine ul.gallery:n类型（2n+1）li:n类型（6n）

等等。当然，如果有很多不同的模式，那么纯css对你来说就不是一个可行的解决方案。Scott，很遗憾，我不能接触网站的代码（没有硬编码的解决方案）。CSS选择器是从一个我可以控制的外部包含的文件中设置的。我将对此添加注释。但是，加入几个选择器以匹配每个模式是一个选项。同样，如果没有更好的选择，我将选择您的答案。Hmmm。这听起来越来越像一个纯CSS解决方案是不可能的，尤其是对于y我们的“通知#2”（如果我读对了，一个部分中的第三/第四个部分可能有超过第一/第二个部分）。同样，如果有一个规则的布局模式，当它们被布置时，你仍然可以得到你所需要的。但是变化越多（即使规则的模式），就越困难、复杂和冗长

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

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;
}