Question

有没有办法在n元素之后选择带有某个类的第一个元素？例如，在以下HTML中，我希望能够在div apple之后仅选择包含CSS类5th的第一个div，从而生成{{1 }} 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)

我已经放了HTML和CSS示例here。

更新
当前的CSS选择器

.data-class.apple:nth-child(n+5):first-child

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

此技术解释为here。

Answer 2

最好说有css类，没有css。我无法严格找到适当的选择器。而不是这个，你可以使用jquery和编写javascript函数用于从第5个孩子开始循环，直到找到包含苹果的类。你可以使用jquery n-th-child来选择循环中的child和hasClass来确定它是否包含apple。因此，通过将结果传递给第n个子函数来选择结果。

Answer 3

它使用此测试：

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

或其他用途：

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

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

3 个答案: