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

Question

给定以下（动态）标记，我需要匹配橙色类的第二次出现，无论有多少 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 {
}

示范

Answer 2

在 HTML 中选择第二个类实例，例如：

<div>
<ul>
<li class="classname">text</li>
<li>text</li>
...
<li>text</li>
<li class="classname">text</li>
<li>text</li>
</div>

使用这个 CSS（在 Chrome 中测试）。

div ul li.classname ~ .classname:not(.classname ~ .classname ~ .classname)

在这种特殊情况下 :nth-child(2) 或 :nth-of-type(2) 不起作用。