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個孩子甚至嵌套元素

回答

相關問題