CSS样式:nth-Child甚至嵌套元素

即使元素是嵌套在div 中，我如何样式 :nth-child(4n)，例如，这里是 p div：

p:nth-child(2) {
    background: red;
}

<p>The first paragraph.</p>
<div>
  <p>The second paragraph.</p>
</div>
<p>The third paragraph.</p>
<p>The fourth paragraph.</p>

body p:nth-child(2n) {
    background: red;
}
body div:nth-child(2n) p {
    background: red;
}

<body>
<p>The first paragraph.</p>
<div>
  <p>The second paragraph.</p>
</div>
<p>The third paragraph.</p>
<p>The fourth paragraph.</p>
<body>

    .content *:nth-child(2) {
        background: red;
    }

<!-- begin snippet: js hide: false console: true babel: false -->
<div class="content">
    <p>The first paragraph.</p>
    <div>
        <p>The second paragraph.</p>
    </div>
    <p>The third paragraph.</p>
    <p>The fourth paragraph.</p>
    <p><b>Note:</b> Internet Explorer 8 and earlier versions do not support the :nth-child() selector.</p>
</div>

相关内容

最新更新

热门标签：