用CSS选择第二次出现的类？

Question

给定以下(动态)标记,我需要匹配类orange的第二次出现,无论有多少div具有类apple.

<div>
  <div class="apple"></div>
  <div class="apple"></div>
  <div class="orange"></div>
  <div class="apple"></div>
  <div class="apple"></div>
  <div class="orange"></div> <--
  <div class="apple"></div>
</div>

可以用CSS完成吗？谢谢.

Answer 1

您可以使用选择器级别3来选择那些不是第一个的选择器:

.orange ~ .orange {
}

示范

最好的方法是使用描述其他.orange元素的规则来完成样式:

.orange, .orange ~ .orange ~ .orange {
}

示范