:nth-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>

我希望选择带有内容1st 的div，但事实并非如此。但是，如果我删除了 h1 元素，那么它会按预期工作。为什么？

Answer 1

您遇到的问题是选择器本身：:nth-child();这会找到它所附加的元素，div，它是其父元素的第 n 个子元素。

根据您的选择：

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()。