通配符选择器 应慎用，仅限全局盒模型归一化（ { box-sizing: border-box; }）和限定范围的默认间距清理；禁用在组件级css中，避免破坏可访问性与性能。
通配符选择器 * 不该随便用，尤其不能只写 * { margin: 0; padding: 0; } 就完事——它会重置所有元素的默认行为，包括 textarea、input、button 的原生可访问性样式，还可能破坏表单控件的视觉反馈。
什么时候必须用 *？
真正需要通配符的场景极少，典型的是「全局盒模型归一化」和「跨浏览器默认间距清理」，但前提是配合 box-sizing 和明确的重置范围：
- 只在项目初始化阶段使用，且应放在所有其他 CSS 规则之前
- 优先用
* { box-sizing: border-box; }，它比重置 margin/padding 更安全、更必要 - 若真要清 margin/padding，请限定作用域，比如
body * { margin: 0; padding: 0; }，避免影响svg、math等内联容器 - 永远不要在组件级 CSS（如 Vue 单文件组件的
<style scoped></style>）里用*，它会污染父级或兄弟组件
* 和 * *、div * 的区别很关键
很多人以为 * 就是“选所有”，其实组合写法会极大改变匹配逻辑和性能表现：
-
*匹配文档中每个元素，一次遍历，开销固定 -
* *是后代选择器，匹配所有嵌套层级中的任意元素（即“所有非顶层元素”），浏览器需逐层检查父子关系，性能明显下降 -
div *只匹配div内部的任意后代（不包括div自身），常用于局部样式隔离，但注意它仍会命中文本节点的匿名容器，实际效果不如div > * -
div > *是子选择器，只匹配div的直接子元素，性能更好、意图更清晰，多数时候应优先考虑它
为什么 *:hover 大部分时候没反应？
这不是语法错误，而是浏览器限制：*:hover 理论上匹配所有元素，但实际只对「可交互元素」触发伪类，比如 a、button、带 tabindex 的 div。普通 span 或 p 即使写了 *:hover { color: red; } 也不会变色。
- 想让非交互元素响应 hover，必须显式加
tabindex="-1"（否则无法聚焦，也无法触发 hover） -
*:focus同理：只有可获得焦点的元素才生效，且需用户主动 tab 进入或 JS 调用.focus() -
*:first-child这类结构伪类不受限制，它只看 DOM 位置，不依赖交互能力 - 移动端无 hover 概念，
*:hover在 touch 设备上基本无效，别依赖它做核心交互
替代 * 的现代方案更可靠
ES2015+ 和现代 CSS 已提供更精准、更可控的替代方式，应优先采用：
- 用
all: unset;替代大段重置规则，它会清除继承属性和自身属性（但不重置display），语义更明确 - 用
CSS Reset库（如modern-normalize）代替手写*，它只重置真正有兼容性问题的属性，保留语义化默认行为 - 用
:where(*)或:is(*)控制权重：例如:where(*) { margin: 0; }权重为 0，不会被后续规则意外覆盖 - 自定义属性（
--base-margin）配合 :root 设置，再由各组件按需继承，比全局通配更灵活、更易调试
真正难处理的从来不是怎么写 *，而是它一旦生效，就很难定位哪个组件的样式被意外覆盖了——尤其在多人协作或引入第三方 UI 库时。留心它的隐式传播性，比记住语法更重要。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
