应使用 > 选择器精准匹配直接子元素，如 .container > div；:scope 可在 JS 中限定查找范围；避免通配符和无约束属性选择器；注意继承属性与 Shadow DOM 隔离机制。
用 > 代替空格，精准匹配直接子元素
很多人写 .container div 本意是只选 .container 下一级的 div，结果却把所有嵌套层级的 div 都选中了。这是因为空格是「后代选择器」，不是「子元素选择器」。
真正只选直接子元素，必须用大于号 >：.container > div。它只匹配父元素下**紧挨着的子元素**，不穿透到孙辈及更深层。
- 错误写法：
.card ul li a→ 会命中任意深度的a（比如.card里套了 5 层ul也中招） - 正确写法：
.card > ul > li > a→ 每一级都强制“直接子级”，路径明确、可控 - 注意：
>两边要有空格，.card>ul在多数浏览器中虽能解析，但不符合规范，易被 lint 工具报错
:scope 是现代方案，但兼容性要查清
如果你在 JavaScript 中动态创建 DOM 片段，再用 querySelector 查找，:scope 能帮你避免污染全局上下文。
例如：el.querySelector(':scope > .btn') 确保只在 el 的直系子元素里找 .btn，不会误触 el 内部更深层结构。
立即学习“前端免费学习笔记（深入）”；
- 支持情况：Chrome 29+、Firefox 32+、Safari 15.4+、Edge 79+；IE 完全不支持
- 别把它当 CSS 选择器单独用——
:scope在纯 CSS 文件里无意义，只在 JS 的querySelector/matches()等 API 中生效 - 替代方案（兼容老浏览器）：
el.children配合Array.from().filter()，比用querySelectorAll('*')再遍历判断parentElement === el更轻量
慎用通配符和模糊类名，它们会放大选择范围
你以为 [class*="icon"] 很方便？它可能把 icon-wrapper、primary-icon-large、甚至 not-an-icon-at-all（只要含 icon 字串）全选中——这本质上是在扩大匹配面，跟“避免选所有子元素”的目标背道而驰。
- 优先用精确类名：
.icon、.icon--close，而不是靠属性包含匹配 - 避免
*[attr]或[attr]这类无约束属性选择器，它们默认作用于整个文档树 - 如果必须用属性选择，加上标签或父容器限定：
button[data-action] > span，而非[data-action] span
检查是否意外触发了继承或全局样式穿透
有时候你没写错选择器，但子元素还是被影响了——大概率是父元素设了 color、font-size、line-height 这类可继承属性，或者用了 all: unset / all: revert 这种强力重置。
- 用浏览器 DevTools 的「Computed」面板看具体值来源，别只盯「Styles」里的规则
-
inherit和unset行为不同：unset对继承属性等价于inherit，对非继承属性等价于initial，容易误判 - 组件化开发中，Shadow DOM 的
:host和::slotted才是真正隔离子元素样式的手段，普通 CSS 无法突破 DOM 树层级限制
最常被忽略的一点：选择器看似“安全”，但一旦父容器本身是动态插入或由第三方库控制（比如 React 的 Portal、Vue 的 teleport），它的实际 DOM 位置可能脱离你预期的层级结构——这时候光靠 CSS 选择器逻辑已经不够，得配合 JS 判断 element.closest() 或监听真实挂载节点。
