css第一个子元素选择器

作者：农村混血兒发布日期:2026-05-10 浏览:70

/* 选择父元素下的第一个子元素 */
.first-child-example > :first-child {
    color: red;
}

/* 示例HTML结构 */
<div class="first-child-example">
    <p>我是第一个子元素，会被选中并变为红色。</p>
    <p>我是第二个子元素，不会被选中。</p>
</div>

解释说明：

:first-child 是 CSS 中的选择器，用于选择作为其父元素的第一个子元素的元素。
在上面的示例中，.first-child-example > :first-child 会选择 .first-child-example 下的第一个子元素，并将其文本颜色设置为红色。
注意，:first-child 只匹配父元素下的第一个子元素，而不一定是特定类型的元素。如果需要选择特定类型（如第一个 <p> 元素），可以使用 :first-of-type。

上一篇：css背景颜色渐变从左到右

下一篇：css流光边框