如何做：n-child工作？

Question

我有以下代碼：

div:nth-child(1) { 
 
    background-color: red; 
 
}

<h1>Boxes</h1> 
 
<div>1</div> 
 
<div>2</div> 
 
<div>3</div> 
 
<div>4</div> 
 
<div>5</div> 
 
<div>6</div> 
 
<div>7</div> 
 
<div>8</div> 
 
<div>9</div>

我預計div與1st要選擇的內容，但事實並非如此。但是，如果我刪除h1元素，則它按預期工作。爲什麼？

Answer 1

你遇到的問題是選擇器本身：:nth-child();這找到了它所附的元素，它是其父項的第n個孩子的div。

當你選擇：

div:nth-child(1) { 
/*...*/ 
} 

這將不會匹配任何內容;因爲h1元素是共享父級的第一個孩子/ :nth-child(1)。

適應，你需要使用兩種：

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

JS Fiddle demo。

或者創建一個新父項來包含div元素。

<h1>Boxes</h1> 
<div> 
    <div>1</div> 
    <div>2</div> 
    <div>3</div> 
    <div>4</div> 
    <div>5</div> 
    <div>6</div> 
    <div>7</div> 
    <div>8</div> 
    <div>9</div> 
</div> 

JS Fiddle demo。

在支持的瀏覽器，你也可以使用:nth-of-type(1)：

div:nth-of-type(1) { 
    background-color: red; 
}​ 

JS Fiddle demo。

參考文獻：

• :nth-of-type()。