Html 第N个孩子是怎么工作的？

我有以下代码：

div:n子级（1）{
背景色：红色；
}

框
1.
2.
3.
4.
5.
6.
7.
8.
9

您遇到的问题是选择器本身：

：nth-child（）

；这将查找它所附加到的元素，

div

，它是其父元素的第n个子元素

当您选择时：

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

这和任何东西都不匹配；由于

h1

元素是共享父级的第一个子级/

：第n个子级（1）

要进行调整，您需要使用以下任一选项：

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

或者创建一个新的父元素来封装

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>

参考资料：

---

您遇到的问题是选择器本身：

：nth-child（）

；这将查找它所附加到的元素，

div

，它是其父元素的第n个子元素
当您选择时：

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

这和任何东西都不匹配；由于

h1

元素是共享父级的第一个子级/

：第n个子级（1）

要进行调整，您需要使用以下任一选项：

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

或者创建一个新的父元素来封装

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>

参考资料：
---

好吧，如果我不确定兄弟姐妹，我只想让

：nth child

处理

div

而忽略其他孩子怎么办？请参阅更新的答案，

：nth-of-type（）

可能是您的朋友（但其实现/兼容性是可变的）我不知道，有人似乎嫉妒您得到了分数。无论如何，即使你不使用选择器库，浏览器对

：nth-child（）

和

：nth-of-type（）

（事实上，所有CSS3结构伪类）的支持都是相同的。@BoltClock:我不认为这是嫉妒（在接受之前就投了反对票），我认为是人们不理解

：nth-child（）的原因

选择器起作用（参见Praveen获得的双重否决票）。谢谢！不知何故，我没有意识到这一点。好吧，如果我不确定兄弟姐妹，我只想让

：n个孩子
处理
div
而忽略其他孩子呢？请看更新的答案，
：n-of-type（）
可能是你的朋友（但它的实现/兼容性是可变的）我不知道，有人似乎嫉妒你得了这个分数。无论如何，即使你不使用选择器库，浏览器对
：nth-child（）
和
：nth-of-type（）
（事实上，所有CSS3结构伪类）的支持都是相同的。@BoltClock:我不认为这是嫉妒（在接受之前就投了反对票），我认为是人们不理解
：nth-child（）的原因
选择器起作用（参见Praveen获得的双重否决票）。谢谢！不知怎的，我没有意识到这一点。