为什么不指定外层容器类就无法用内层类覆盖background-color属性

核心原因：CSS选择器优先级（特异性）规则 #

CSS中多个选择器命中同一个元素时，会按照选择器的权重高低决定哪个样式生效，只有权重相同时才会按照代码书写的先后顺序判断。

基础权重计算规则（从高到低） #

• 内联样式（写在元素style属性里的样式）：权重值 1000
• ID选择器（例如#header）：权重值 100
• 类选择器、属性选择器、伪类选择器（例如.box、[type="text"]、:hover）：权重值 10
• 元素选择器、伪元素选择器（例如div、::before）：权重值 1

你场景中的权重对比 #

1. 给内层div统一设置样式的选择器.assign-1 div：包含1个类选择器+1个元素选择器，总权重 = 10 + 1 = 11
2. 你最初单独写的内层类选择器.assign-1-shape-2：只包含1个类选择器，总权重 = 10

因为10 < 11，所以.assign-1-shape-2的background-color优先级低于统一设置的样式，自然无法覆盖。
而修改后的选择器.assign-1 .assign-1-shape-2包含2个类选择器，总权重 = 10 + 10 = 20，20>11，优先级超过了统一设置的样式，所以可以正常覆盖。

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