html - 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中？

Answer 1

你可以将它应用到第二个 div，它必须以唯一的方式标识

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

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

有多种方法可以实现这一点。例如，您也可以选择第一个 child (:first-child 或 :nth-child(1))。