通配符选择器*无差别匹配所有元素，性能差、权重低、易覆盖；后代选择器div p依赖结构、上下文感知强、适合组件化开发，推荐优先使用。
通配符选择器 * 会无差别匹配所有元素，慎用
它不看结构、不问语义，只要页面里存在一个标签，* 就会把它拉进来。比如 * { margin: 0; padding: 0; } 确实能快速清掉默认边距，但同时也会给 <input>、<button></button>、<svg></svg> 甚至自定义元素加样式——而这些元素很可能本不该被重置。
- 性能开销大：浏览器需为每个节点计算该规则，DOM 越大越拖慢渲染
- 权重为 0，容易被其他规则意外覆盖，调试时难定位来源
- 现代项目普遍用
reset.css或normalize.css替代，更精准可控
后代选择器 div p 只作用于特定嵌套路径中的元素
它依赖 HTML 结构，只匹配在 div 内部（任意层级）的 p 元素，哪怕中间隔着 section > article > header 也生效。这种“上下文感知”是它和通配符最本质的区别。
- 写法必须用空格分隔，
div p≠div>p（后者是子选择器，只认直接子级） - 适合组件化开发：比如
.card p统一设置卡片内所有段落行高，不影响全局p - 深层嵌套（如
article section div ul li a）会降低渲染效率，建议控制在 3 层以内
什么时候该用哪个？看目标是否需要“结构约束”
如果目标是“清除所有默认间距”，通配符看似省事，但实际埋下维护隐患；如果目标是“只改文章区域里的标题和列表”，后代选择器才是合理选择。
- 用
*的唯一合理场景：极简原型、临时调试、或搭配 scoped CSS（如 Vue 单文件组件中）限制作用域 - 用后代选择器的典型场景：
.header-nav a控制导航链接样式、.modal .btn避免影响全局按钮、form input[type="text"]精准修饰表单文本框 - 误用通配符的常见现象：CSS 文件体积没变小，但 DevTools 里样式覆盖链越来越长，最终靠
!important强行收尾
* {
box-sizing: border-box;
}
.article-content h2,
.article-content p,
.article-content ul li {
line-height: 1.6;
}上面这段代码里，第一行用通配符统一盒模型是可接受的（现代框架也常这么做），但第二行若写成 .article-content * 就会把图片、按钮、嵌入视频全拉进来设行高——这显然不是本意。结构越复杂，后代选择器的“克制”就越关键。
立即学习“前端免费学习笔记（深入）”；
