通过选择器 为所有子元素应用样式。以下是几种常见方法：
1. 选择所有直接子元素（不包括孙级）
css
复制
下载
.parent > * {
/* 样式规则 */
color: red;
}
-
>选择器：只匹配直接子元素 -
*通配符：匹配任意类型的子元素（div/p/span 等）
2. 选择特定类型的子元素
css
复制
下载
/* 所有直接子 div */
.parent > div {
border: 1px solid blue;
}
/* 所有子孙元素（任意层级） */
.parent div {
background: yellow;
}
3. 使用 :where() 降低优先级
css
复制
下载
.parent > :where(*) {
margin: 10px;
}
JavaScript 方案（如果需要操作 DOM）
如果需要获取子元素集合进行操作，必须使用 JavaScript：
javascript
复制
下载
// 获取所有子元素（仅元素节点）
const children = document.querySelector('.parent').children;
// 获取所有子节点（包含文本/注释等）
const childNodes = document.querySelector('.parent').childNodes;
// 示例：遍历子元素
Array.from(children).forEach(child => {
child.style.backgroundColor = "lightgreen";
});
关键区别
| 方法 | 能力 | 用途 |
|---|---|---|
| CSS 选择器 | 应用样式 | 批量设置子元素样式 |
| JavaScript | 获取 DOM 对象 | 动态操作子元素（增删改查） |
📌 总结：
纯 CSS 只能选择子元素并添加样式，无法获取对象集合
如需操作 DOM，必须使用 JavaScript 的
children或querySelectorAll
