CSS选择器选择n个元素之后的第一个元素答案

【问题标题】：CSS selector to select the first element after n elementsCSS选择器选择n个元素之后的第一个元素
【发布时间】：2014-07-10 10:05:59
【问题描述】：

有没有办法在n 元素之后选择第一个带有某个类的元素？例如，在下面的 HTML 中，我希望能够只选择在 5th div 之后具有 CSS 类 apple 的第一个 div，从而选择 7th div 元素。

<div>
    <div class="data-class">1</div>
    <div class="data-class">2</div>
    <div class="data-class">3</div>
    <div class="data-class apple">4</div>
    <div class="data-class">5</div>
    <div class="data-class">6</div>
    <div class="data-class apple">7</div>
    <div class="data-class apple">8</div>
    <div class="data-class">9</div>
    <div class="data-class apple">10</div>
</div>

这个选择器选择了所有的divs，但我只想要第一个：.data-class.apple:nth-child(n+5)

而这个甚至不起作用：.data-class.apple:nth-child(n+5):first-child

我已经把 HTML 和 CSS 示例 here.

更新
当前的 CSS 选择器

.data-class{
  background-color: #0ea;
  padding: 10px;
  margin-bottom: 5px;
  border: 1px solid #444;
}

.data-class:nth-child(n+5)+.apple{
  background-color: #f0f;
}

【问题讨论】：

标签： html css css-selectors

【解决方案1】：

要选择出现在其他元素之后的元素，请使用 ~ 组合器：

.data-class:nth-child(5) ~ .data-class.apple {
  background-color: #f0f;
}

您将无法仅使用一个选择器匹配出现的第一个 .apple。您将需要创建另一个规则来撤消您为后续 .apple 元素应用的样式：

.data-class:nth-child(5) ~ .data-class.apple ~ .data-class.apple {
  background-color: #0ea;
}

here 解释了这种技术。

【讨论】：

你能更新一下jsbin链接吗？我无法让它工作:(
对不起，我不太清楚如何修改/fork bins。如果您显示要更改的 CSS，我可以相应地更新我的答案。
我还添加了带有选择器的 css 类。通过 CSS4 选择器可以实现同样的事情吗？
我编辑了我的答案。我不确定这是否可能，:nth-match() 允许在完整配置文件中使用组合器，但不允许在 CSS 配置文件中使用组合器，这可能会出现问题。

【解决方案2】：

最好说有css类，没有css。我严格找不到合适的选择器。取而代之的是，您可以使用 jquery 并编写 javascript 函数从第 5 个孩子开始使用 for 循环，直到找到包含苹果的类。您可以使用 jquery n-th-child 在循环中选择子项并使用 hasClass 来确定它是否包含苹果。因此，通过将结果传递给第 n 个子函数来选择结果。

【讨论】：

我不能为此使用javascript，这是主要问题。

【解决方案3】：

它使用这个测试：

div > .data-class.apple, .data-class{.....}

或其他用途：

div > .apple:not(.data-class){.....}

【讨论】：