通配符选择器*最合理用途是重置box-sizing和font-smoothing；它不应用于全局清margin/padding或样式统一，因匹配范围过大拖慢渲染且破坏语义与可访问性。
通配符选择器 * 真正的作用是重置默认样式，不是“给所有元素加样式”
很多人误以为 * 是为了“统一加颜色/字体”，其实它最合理、最主流的用途只有一个：清除浏览器默认的 margin/padding。所有现代 CSS 重置方案（如 Normalize.css、Reset.css）都从这里起步——因为不同浏览器对 body、h1、ul 等元素的默认外边距和内边距不一致，直接导致布局错位。
-
* { margin: 0; padding: 0; }是常见写法，但过于粗暴：它也会重置input、button、textarea的默认内边距，导致表单控件文字贴边、点击区域变小 - 更稳妥的做法是只重置容器类元素：
*, *::before, *::after { box-sizing: border-box; }—— 这条几乎无副作用，且让 width/height 计算更可预测 - 真正需要清 margin/padding 时，推荐用语义化组合：
body, h1, h2, h3, p, ul, ol, dl, pre, form { margin: 0; padding: 0; }
为什么 * 会拖慢渲染性能？关键在“匹配范围不可控”
浏览器解析 CSS 时，* 会强制对 DOM 中每一个节点做样式匹配，包括 script、meta、noscript 这些本不该渲染的元素。尤其在大型 SPA 页面中，DOM 节点动辄上千，* 会显著增加样式计算时间。
- Chrome DevTools 的 “Rendering” 面板中开启 “Paint flashing”，你会看到整个页面频繁高亮——这往往是
*或深层后代选择器惹的祸 - 移动端低端设备上，
* { transition: all .3s; }这类写法极易引发卡顿，因为每个元素都绑定了过渡监听 - 替代方案：用
html或body作为根容器统一继承，例如body { font-family: sans-serif; line-height: 1.5; }，再让子元素 inherit
实际项目中，* 最该被替换的三种写法
很多团队仍在用通配符“偷懒”，结果埋下维护雷。下面这些写法看似简洁，实则危险：
/* ❌ 危险：影响所有伪元素，可能破坏 icon 字体或 ::marker 样式 */
*::before, *::after {
box-sizing: border-box;
}
/ ✅ 正确：只作用于可渲染容器 /
,
::before,
*::after {
box-sizing: border-box;
}
/ ❌ 危险：重置了 SVG 的 viewBox 缩放行为 /
立即学习“前端免费学习笔记（深入）”；
- { transform: none !important; }
/ ✅ 正确：仅重置需要动画的组件 / .animated-element { transform: none; }
/ ❌ 危险：强制所有元素 display: block，破坏 inline 元素语义 /
技术上面应用了三层结构，AJAX框架，URL重写等基础的开发。并用了动软的代码生成器及数据访问类，加进了一些自己用到的小功能，算是整理了一些自己的操作类。系统设计上面说不出用什么模式，大体设计是后台分两级分类，设置好一级之后，再设置二级并选择栏目类型，如内容，列表，上传文件，新窗口等。这样就可以生成无限多个二级分类，也就是网站栏目。对于扩展性来说，如果有新的需求可以直接加一个栏目类型并新加功能操作
- {
display: block;
}
记住：
*没有语义，没有上下文，它只回答“是不是一个节点”，不关心“它该是什么”。而现代 CSS 工程强调的是“意图明确”——你想要的是“所有表单控件尺寸一致”，就该写input, select, textarea { box-sizing: border-box; }，而不是靠*碰运气。真正值得全局设置的，其实是 box-sizing 和 font-smoothing
这两个属性影响广泛、副作用极小，且浏览器兼容性好（IE8+），是
*唯二值得保留的使用场景：*, *::before, *::after { box-sizing: border-box; }/ 可选：提升文本清晰度（尤其 macOS / iOS） /
- {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
-
box-sizing: border-box让 width 包含 padding/border，避免反复计算；加上::before/::after是因为很多 UI 库（如 Bootstrap）依赖伪元素做装饰，它们也需统一盒模型 -
font-smoothing属于纯视觉增强，不影响布局，且加在*上比逐个元素写更省事 - 其他所谓“全局设置”，比如
* { outline: none; }，会直接破坏键盘可访问性（a11y），必须禁用
通配符选择器不是语法糖，它是 CSS 中少有的“无差别暴力匹配”机制。用得好，能快速建立基线；用得滥，会让样式失控、调试困难、性能下滑——它的分寸感，不在“能不能写”，而在“为什么非得写它”。
-
- {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
