CSS选择器用于在n个元素之后选择第一个元素

Question

是否有一种方法可以在n元素之后选择带有某个类的第一个元素？例如，在下面的HTML中，我希望能够只选择在div div之后具有CSS类apple的第一个CSS类，从而选择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>

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

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

我已经把这里和CSS样本放在一起了。

更新

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

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

这一技术被解释为这里。

Answer 2

更好的说法是拥有css类，而不是css。我没能找到严格的审批者。而不是这样，您可以使用jquery并编写javascript函数，该函数使用for循环，直到它找到包含apple的类为止。您可以使用jquery child来选择子循环，并使用hasClass来确定它是否包含苹果。因此，通过将结果传递给n个子函数来选择结果。

Answer 3

它使用这个测试：

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

或其他用途：

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