css 子元素

作者：渚寒烟淡发布日期:2025-06-04 浏览:61

/* 示例代码：设置子元素的样式 */

/* 选择所有父元素 .parent 下的直接子元素 .child */
.parent > .child {
    color: blue;
    font-weight: bold;
}

/* 选择所有父元素 .container 下的所有子元素（不论层级） */
.container .item {
    background-color: lightgray;
    padding: 10px;
}

/* 选择第一个子元素 */
.first-child-example > :first-child {
    border: 2px solid red;
}

/* 选择最后一个子元素 */
.last-child-example > :last-child {
    border: 2px solid green;
}

解释说明：

直接子选择器 (>)：
.parent > .child 只会选择 .parent 的直接子元素 .child，而不会选择嵌套更深的元素。
后代选择器：
.container .item 会选择 .container 内的所有 .item 元素，不论它们在 DOM 树中的层级。
:first-child 和 :last-child：
这些伪类选择器分别用于选择父元素的第一个和最后一个子元素。

上一篇：css 三行省略号

下一篇：css 背景颜色透明