CSS样式：第n个孩子甚至嵌套元素

我如何风格:nth-child(4n)甚至与元素嵌套一个div内，这里的例子是p内div：CSS样式：第n个孩子甚至嵌套元素

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>

来源

2017-04-25 Rachid Oussanaa

在这种情况下，你需要用'第n-的-type'。 – Abhitalks

@Abhitalks当我做p：n型（2）{ background：red; }我有第三个红色的 –

哎呀！我在匆忙中误读了标记。这个答案可能会帮助你 - http://stackoverflow.com/a/23987180/1355315 – Abhitalks

.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>

来源

2017-04-25 10:55:35

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>

来源

2017-04-25 14:46:12

CSS样式：第n个孩子甚至嵌套元素

回答

相关问题