css 第一个子元素

作者：白话少年的痴情梦— 发布日期:2026-06-28 浏览:59

/* 选择第一个子元素的示例代码 */

/* 选择某个父元素下的第一个子元素 */
.parent > :first-child {
    /* 样式规则 */
    color: red;
}

/* 示例 HTML 结构 */
/*
<div class="parent">
    <p>我是第一个子元素，会被选中。</p>
    <p>我是第二个子元素，不会被选中。</p>
</div>
*/

/* 如果需要选择特定类型的第一个子元素，可以使用 :first-of-type */
.parent > p:first-of-type {
    /* 样式规则 */
    font-weight: bold;
}

/* 示例 HTML 结构 */
/*
<div class="parent">
    <span>我是一个 span 元素。</span>
    <p>我是第一个 p 元素，会被选中。</p>
    <p>我是第二个 p 元素，不会被选中。</p>
</div>
*/

解释说明：

:first-child 伪类会选择作为其父元素的第一个子元素的元素。
:first-of-type 伪类会选择作为其父元素的第一个特定类型（如 p）的元素。

上一篇：css position属性的常用值有哪些

下一篇：css rgba