极客教程CSS选择第一个子元素
在CSS中，可以使用伪类选择器来选择元素的特定子元素。其中，:first-child 伪类选择器用来选择指定元素的第一个子元素。
语法
:first-child 伪类选择器的语法如下：
selector:first-child {
/* styles */
}
其中，selector 是要选择的父元素的选择器，:first-child 是伪类选择器，用来选择父元素的第一个子元素。
示例
假设有以下的HTML结构：
<div class="parent">
<p>第一个子元素</p>
<p>第二个子元素</p>
<p>第三个子元素</p>
</div>
我们想要选中 .parent 元素的第一个子元素，可以使用如下的CSS样式：
.parent p:first-child {
color: red;
}
上面的代码表示选中 .parent 元素下的第一个 p 元素，并将其文字颜色设置为红色。
运行结果
根据上面的示例代码，第一个子元素的文字颜色会被设置为红色，其他子元素保持默认样式。实际效果如下：
- 第一个子元素（第一个
p元素）：文字颜色为红色 - 其他子元素（第二个和第三个
p元素）：保持默认样式
注意事项
- 使用
:first-child伪类选择器时，要注意它选择的是符合选择器条件的父元素的第一个子元素，而不是在整个文档中第一个元素。 - 如果需要选择父元素的第一个指定子元素，可以通过灵活运用选择器进行组合，例如
.parent p:first-child表示选择.parent元素下的第一个p子元素。
总结一下，本文详细介绍了如何使用CSS的 :first-child 伪类选择器来选择父元素的第一个子元素，并给出了示例代码和运行结果。