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

Demonstration

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

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

Demonstration

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) 不起作用。

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

2 个答案: