CSS嵌套类无法直接选中？为何.offer-img样式被.col-2 img规则覆盖

原因：CSS选择器优先级权重差异 #

这是CSS选择器权重优先级规则导致的，W3C标准中选择器权重计算规则如下：

• 每个ID选择器（如#app）权重值为100
• 每个类选择器、属性选择器、伪类选择器（如.offer-img、[type="text"]、:hover）权重值为10
• 每个标签选择器、伪元素选择器（如img、::before）权重值为1
• 通配符选择器*、继承样式权重为0

对相关选择器权重计算结果如下：

1. .col-2 img：包含1个类选择器+1个标签选择器，总权重=10+1=11
2. .offer-img：仅包含1个类选择器，总权重=10
3. .col-2 .offer-img：包含2个类选择器，总权重=10+10=20

当多个选择器同时命中同一元素，且对同一属性设置了不同值时，权重更高的样式会优先生效；只有权重相同的情况下，才会遵循“写在后面的样式覆盖前面样式”的规则。
所以.col-2 img权重11高于.offer-img的10，因此后者的padding设置会被覆盖；而.col-2 .offer-img权重20高于11，所以可以正常覆盖原有padding值。

如果需要让单个.offer-img选择器的样式生效，可在属性值后加!important标记（padding: 40px !important;），但非特殊场景不推荐使用，会破坏全局样式优先级逻辑。

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