为什么CSS中background属性会覆盖特定元素之前定义的对应样式？

原因解释 #

这是CSS选择器优先级规则和属性叠加逻辑共同作用的结果：

1. 先看两个选择器的优先级权重：
   • .text-box p 由类选择器+元素选择器组成，优先级权重为 0,1,1
   • 通用 p 选择器只有元素选择器，优先级权重为 0,0,1
     当两个规则同时命中同一个元素时，优先级更高的规则里的同名属性会直接覆盖低优先级规则的对应属性。
2. 对应你的代码场景：
   • 你在 .text-box p 里已经定义了 margin、font-size、color 三个属性，这三个属性和通用p规则里的同名属性冲突，所以最终生效的是 .text-box p 里的定义，通用p的对应属性自然不会生效。
   • 通用p规则里的 background 属性，你没有在 .text-box p 里做过任何定义，不存在属性冲突，所以会直接叠加到第一个p元素上，这就是为什么只有红背景同时生效的原因。
3. 如果你发现通用p里的font-weight、line-height、padding也没有作用到第一个p上，说明有其他优先级更高的CSS规则对这些属性做了定义，你可以打开浏览器开发者工具的「元素」面板，查看第一个p元素的样式列表，就能看到每个属性的来源和覆盖情况。

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