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 选择器	应用样式	批量设置子元素样式
JavaScript	获取 DOM 对象	动态操作子元素（增删改查）

📌 总结：

• 纯 CSS 只能选择子元素并添加样式，无法获取对象集合

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