通配符选择器用于全局样式重置，如清除边距和统一盒模型，提升布局一致性；继承则减少重复代码，确保字体、颜色等样式向下传递；二者结合可建立高效、统一的全局样式基线，但需避免滥用以防止性能问题。
通配符选择器和继承是CSS中两个基础但强大的机制，合理使用它们能显著提升样式的维护性和一致性。虽然它们看似简单，但在实际开发中若使用不当，也可能带来性能或样式覆盖的问题。下面从实用角度出发，讲解如何正确利用这两个特性实现高效的全局样式管理。
通配符选择器：快速重置与统一基础样式
通配符选择器（*{}）匹配页面中的所有元素，常用于初始化或清除默认样式。最典型的应用是在CSS重置（reset）阶段消除浏览器默认的边距、内边距差异。
例如：
* { margin: 0; padding: 0; box-sizing: border-box; }这三行代码能统一所有元素的盒模型处理方式，并消除布局偏差。其中 box-sizing: border-box; 尤为关键，它让 width 和 height 包含内边距和边框，使布局更可控。
立即学习“前端免费学习笔记（深入）”；
但要注意：通配符选择器权重虽低，但由于作用范围广，频繁修改其属性可能影响渲染性能。建议仅在全局初始化时使用，避免在复杂选择器中嵌套或重复定义。
利用继承减少重复代码
CSS中的继承是指某些样式会自动传递给子元素，如字体、颜色、文本对齐等。通过合理设置父级样式，可以避免在每个子元素上重复声明。
比如，在 body 上设置：
body { font-family: "Helvetica", sans-serif; color: #333; line-height: 1.6; }
大多数文本类元素（如 p、div、span、h1-h6）都会继承这些样式，无需额外定义。这样不仅减少代码量，也保证了视觉一致性。
对于不默认继承的属性（如边框、背景、外边距），可手动通过 inherit 值启用继承：
.child { color: inherit; font-size: inherit; }这在组件化开发中特别有用，确保子组件能自然融入父级上下文。
结合通配符与继承优化全局体验
将两者结合，可以在项目初期建立一致的样式基线。例如：
* { box-sizing: border-box; }html {
font-size: 16px;
}
body {
font-family: Arial, sans-serif;
color: #222;
line-height: 1.5;
}
img, button, input, textarea {
vertical-align: middle;
}
这段代码做到了：
- 统一盒模型，避免布局错位
- 设定根字号，便于后续使用 rem 单位
- 继承字体与颜色，保持文本风格统一
- 对常用控件进行垂直对齐，提升表单体验
这种结构清晰、职责分明的全局样式规则，为后续模块化开发打下良好基础。
基本上就这些。掌握通配符选择器的边界和继承的规律，能让CSS更简洁高效。关键是用得早、用得准，而不是到处滥用。
