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

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

Answer 1

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

当您选择时：

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

这不匹配任何东西；因为该h1元素是:nth-child(1)共享父项的第一个子项/。

要适应，您需要使用以下任一项：

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

JS 小提琴演示。

或者创建一个新的父级来包含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 小提琴演示。

在支持浏览器时，您还可以使用:nth-of-type(1)：

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

JS 小提琴演示。

参考：

• :nth-of-type().