Html 在这种情况下，如何选择第一个孩子？

我想选择p:first child，但在本例中，正如您所看到的

.root p:first-child {
  background-color: green;
}

选择根目录中的所有p标记，而不是第一个子项：id=“this”

如何仅使用id=“this”来选择。root p：本例中的第一个子项，还是应该使用id

代码：

.root p:第一个孩子{
背景颜色：绿色；
}
p{
保证金：0；
}
.集装箱{
显示：内联框
}
.根{
显示器：flex；
}
div{
显示：块；
背景颜色：粉红色；
边框：1px纯红；
宽度：100px；
高度：100px；
}

试验

测试2

测试3

使用此css片段：

.root p:first-child {
     background-color: green;
}

您正在选择每个p元素，它们在自己的父元素中位于第一位。 对第一个容器中的第一个p元素更改为：

.root .container:first-child p{
      background-color: green;
}

对于第一个容器和第一个p：

.root .container:first-child p:first-child{
      background-color: green;
}

---

这就是你要找的吗？ 在根元素的第一个子元素中选择段落

.root.container:第一个子p{
背景颜色：绿色；
}
p{
保证金：0；
}
.集装箱{
显示：内联框
}
.根{
显示器：flex；
}
div{
显示：块；
背景颜色：粉红色；
边框：1px纯红；
宽度：100px；
高度：100px；
}

试验

测试2

测试3

第一个子元素

选择器选择父元素的第一个子元素并设置其样式。因此，这里的样式被应用于所有

标记，因为在其各自的父容器

.container

中只有一个

标记

不要选择

p

的第一个子项，而是选择类

.container

的

第一个子项

，以获得所需的结果

.root.container:第一个子p{
背景颜色：绿色；
}
p{
保证金：0；
}
.集装箱{
显示：内联框
}
.根{
显示器：flex；
}
div{
显示：块；
背景颜色：粉红色；
边框：1px纯红；
宽度：100px；
高度：100px；
}

试验

测试2

测试3

选择第一个孩子有多种方法，这取决于您的需求。下面是几种方法

首先，如果要选择

容器的第一个子容器

，请使用下面的命令

.root.container p:第一个子容器{
背景颜色：绿色；
}
p{
保证金：0；
}
.集装箱{
显示：内联框
}
.根{
显示器：flex；
}
div{
显示：块；
背景颜色：粉红色；
边框：1px纯红；
宽度：100px；
高度：100px；
}

试验

测试2

测试3

只需更改.root类的CSS，如下所示：.root div:first child p。它会很好用的