子元素选择器>只匹配直接子级，如div>p仅选中div下紧邻的p；后代选择器用空格；:scope锚定样式作用域；:has()可使父元素响应子状态但性能敏感；>.parent>.child与.parent .child语义不同。
子元素选择器 > 只匹配直接子级，不穿透嵌套
很多人误以为 div > p 会选中所有后代 <p></p>，其实它只抓 <div> 下**紧挨着的一层** <code><p></p>。如果中间隔了 <section></section> 或 <article></article>，就完全失效。
-
div > p匹配：<div><p>✅</p></div>
- 不匹配：
<div><section><p>❌</p></section></div>
- 想选所有后代？用空格代替：
div p（后代选择器），但代价是可能选得过宽 - 浏览器兼容性无压力，所有现代浏览器及 IE7+ 都支持
:scope 让 CSS 作用域真正“从当前元素开始”
当在 JavaScript 中动态插入 HTML 并想局部应用样式时，:scope 是关键。它把选择器的“根”锚定到当前元素，避免污染全局或写冗长前缀。
立即学习“前端免费学习笔记（深入）”；
- 不用
:scope：你得写.card .title，依赖类名且易冲突 - 用
:scope：element.innerHTML = `<div class="card"><h2>标题</h2></div>`; const style = document.createElement('style'); style.textContent = ` .card:scope > h2 { font-size: 1.5em; color: #222; } `; element.appendChild(style); - 注意：
:scope在 Chrome/Firefox/Edge 中原生支持，Safari 15.4+ 才完整支持；旧版 Safari 需回退为[data-scope]模拟
伪类 :has() 实现“父元素响应子状态”，但慎用性能
:has() 是目前唯一能让父元素根据子元素状态变化的 CSS 方式，比如 div:has(> input:focus) 给整个表单容器加边框。但它不是“免费午餐”。
- 语法必须带关系符：
div:has(> input:focus)✅，div:has(input:focus)❌（后者是后代，可能触发重排） - 性能敏感：浏览器需反向计算，复杂 DOM 中可能导致渲染卡顿
- 兼容性：Chrome 105+、Safari 15.4+、Firefox 121+ 支持；仍需检查目标用户环境
- 替代思路：用 JS 监听子元素事件并 toggle 类名，更可控
组合陷阱：.parent > .child 不等于 .parent .child
这是最常被复制粘贴却出错的地方。一个符号之差，语义和结果天壤之别。
-
.parent > .child：只找.parent的**直系子元素**中带.child类的节点 -
.parent .child：找.parent内部**任意层级**下带.child类的节点（包括孙子、曾孙） - 调试建议：在 DevTools 的 Elements 面板中右键元素 → “Break on > attribute modification”，观察是否意外命中
- 命名能减少歧义：比如用
.form__header替代.header，配合 BEM 可降低对>的强依赖
实际项目里，> 和 :has() 很容易写错层级或忽略性能代价；而 :scope 虽小众，但在组件化渲染场景中能显著减少样式泄漏风险。
