CSS中<body>标签与通用选择器(*)设置样式的区别及优先级解析

嘿，这个问题问到点子上了，刚好是CSS选择器基础里容易混淆的关键点，我来给你掰扯清楚～

这俩虽然有时候看起来效果相似，但本质上是完全不同的两个东西：

• 作用范围天差地别
  通用选择器*是个“通吃选手”——它会选中DOM里的每一个元素，包括<html>、<body>、<p>、<div>，甚至像::before这种伪元素（取决于浏览器支持）。而<body>选择器只精准命中<body>这一个元素本身，管不到它的子元素。
  举个例子：* { margin: 0; }会把所有元素的默认margin都清掉，但body { margin: 0; }只会清除<body>自己的margin，里面的<p>还是会保留默认的上下margin。
• 继承逻辑不一样
  如果你给body { color: red; }，页面里的大部分文本会变红，这是因为子元素继承了<body>的颜色属性；但如果是* { color: red; }，那是直接给每个元素都设置了color: red，不是继承。
  这点差异在特殊元素上会很明显：比如表单里的<input>默认不继承文本颜色，用body设置的话，<input>的文字还是默认黑色，但用*设置的话，<input>的文字会直接变成红色。
• 性能有细微差别
  现代浏览器对CSS选择器的优化已经做得很好了，但理论上，通用选择器需要遍历DOM中所有元素，比只命中单个<body>元素的选择器要多做一点工作。不过日常开发里这点差异几乎可以忽略，不用太纠结，但知道总没错。

先明确CSS的特异性权重规则：通用选择器*的权重是0-0-0-0，而标签选择器（包括<body>）的权重是0-0-0-1。所以结论很明确：<body>选择器的优先级比通用选择器更高。
举个实际例子验证一下：

* {
  background-color: yellow;
}

body {
  background-color: blue;
}

这时候页面的背景会是蓝色，因为<body>选择器的权重更高，直接覆盖了通用选择器的样式。
当然，如果通用选择器作用的是<body>以外的元素，那<body>选择器管不到它们，各自的样式都会正常生效——比如上面的代码里，<p>元素的背景会是黄色，而<body>是蓝色。

内容的提问来源于stack exchange，提问作者user_06