CSS选择子元素

通过选择器 为所有子元素应用样式。以下是几种常见方法：

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 只能选择子元素并添加样式，无法获取对象集合

• 如需操作 DOM，必须使用 JavaScript 的 children 或 querySelectorAll