css nth-child专属于该文档

Question

因此，当您使用.class:nth-child(2)时，它将影响文档中该类的所有第二个实例...我希望它只影响第一个实例。让我解释一下：

.content:nth-child(2)会影响受影响属性的内容

<div class="test">
    <div class="content">a</div>
    <div class="content" affected="true">a</div>
    <div class="content">a</div>
    <div class="content">a</div>
</div>
<div class="test">
    <div class="content">a</div>
    <div class="content" affected="true">a</div>
    <div class="content">a</div>
    <div class="content">a</div>
</div>

Jsfiddle

我的问题是，如何将其设置为仅影响第n个子节点的第一个实例，如整个文档中的第二个.content，而不是任何div中的第二个.contents ？

Answer 1

您可以将它应用于第二个div，必须以独特的方式识别

http://jsfiddle.net/r3bSz/1/

#test >.content:nth-child(2){
 background-color:#f00;
}

有多种方法可以实现这一目标。例如，您也可以使用第一个孩子（:first-child或:nth-child(1)）。

Answer 2

您的意思是您只想影响 first d.test 中的 second div.content ？

.test:first-child .content:nth-child(2){
    background-color:#f00;
}

希望我理解正确。