是否有一种方法来选择一个类名的第二次发生时，它不是在CSS/SCSS的直接兄弟姐妹?

Question

我想在不添加另一个类的情况下瞄准类的第二个实例。:nth-child和:nth-of-type似乎不起作用，因为它们不是兄弟姐妹。这可能吗?

<div>
<div>First class.
<p className="blue">1st paragraph.</p>
</div>
<div> hello
<section>
<p class="blue">2nd paragraph.</p>
</section>
</div>
</div>

Answer 1

选择的嵌套标记可以防止任何形式的目标子索引伪类，无论是现在还是将来。但是，到目前为止，标记有可能被:nth-child(An+B [of S]?)形式的选择器Level 4草案/规范的附加树结构子索引伪类选择器所针对。

body { margin: 0; font-size: .95em; }
div, p { margin: 3px; font-size: inherit; }
.blue { color: lightblue; }
.orange { color: orange; }
.red { color: palevioletred; }
:nth-child(2 of .blue) { color: palevioletred; }

<div>
<div>
hello
<p class="blue">
1st paragraph and 1st of ".blue"
</p>
<p class="orange">
2nd paragraph and 1st of ".orange"
</p>
<p class="blue">
3rd paragraph and 2nd of ".blue"
<br/>
(... as of now will be
<span class="red">red in safari</span>
since it already supports the
<a class="red" href="https://drafts.csswg.org/selectors-4/#the-nth-child-pseudo">
<code>:nth-child(An+B [of S]?)</code>
</a>
tree-structural child-indexed pseudo-class selector of the
<a class="red" href="https://drafts.csswg.org/selectors-4/">
Selectors Level 4
</a>
specification ...)
</p>
</div>
<div>
hello
<p class="blue">
1st paragraph and 1st of ".blue"
</p>
<section>
<p class="blue">
1st paragraph and 1st of ".blue"
</p>
</section>
<p class="blue">
2nd paragraph and 2nd of ".blue"
(should be <span class="red">red in safari</span>)
</p>
</div>
</div>