如何使用CSS选择器选中特定父元素下的第一个子元素？

在CSS中，可以使用子选择器（>）来选中特定父元素下的第一个子元素。具体方法是将父选择器和子选择器用子选择器符号（>）连接起来，中间不留空格。例如，如果你想选中类名为"parent"的元素的第一个直接子元素（该子元素也是一个类名为"child"的元素），你可以使用如下选择器：

.parent > .child:first-child {
    /* CSS规则 */
}

这样就会选中所有类名为"parent"的元素下的第一个类名为"child"的直接子元素，并应用其中定义的CSS规则。

另一种方法是使用`:first-child`伪类选择器，它专门用于选中父元素下的第一个子元素，但这个子元素必须是其类型的第一个子元素。例如：

.parent > :first-child {
    /* CSS规则 */
}

这段CSS代码将会选中所有类名为"parent"的元素的第一个子元素，并应用相应的CSS规则。

需要注意的是，`:first-child`选择器会匹配任何类型的第一个子元素，而不一定是类名为"child"的元素。如果你需要精确地选中特定类型的第一个子元素，你应该使用子选择器（>）和类选择器（.child）结合的方式。

相关问题

如何使用CSS选择器选中特定父元素下的第1个子元素和最后一个子元素？

在CSS中，要选中特定父元素下的第1个子元素和最后一个子元素，可以使用`:first-child`和`:last-child`伪类选择器。

1. `:first-child`伪类选择器用于匹配父元素的第一个子元素。如果该子元素符合条件，那么它会被选中。例如，如果你想要选中所有`<div>`元素中的第一个`<p>`子元素，可以使用如下选择器：

   div > p:first-child {
       /* 样式 */
   }

这段CSS代码会选中所有`<div>`元素的第一个直接子元素`<p>`并应用相应的样式。

2. `:last-child`伪类选择器用于匹配父元素的最后一个子元素。如果该子元素符合条件，那么它会被选中。例如，选中所有`<div>`元素中的最后一个`<p>`子元素的CSS选择器为：

   div > p:last-child {
       /* 样式 */
   }

这段CSS代码会选中所有`<div>`元素的最后一个直接子元素`<p>`并应用相应的样式。

需要注意的是，`:first-child`和`:last-child`都严格要求所选的元素必须是其父元素的第一个或最后一个子元素，否则这些规则不会被应用。