为何页面中的.box元素应用.container .box样式而非单独.box样式？

这是CSS选择器优先级在起作用——不同类型的CSS选择器有不同的权重，权重更高的样式会覆盖权重较低的样式。

具体到你的代码：

• 单独的.box是单个类选择器，权重值为 0,1,0
• .container .box是两个类选择器组成的后代选择器，权重值为 0,2,0，比单个类选择器的权重更高

所以不管这两段CSS代码的书写顺序如何，权重更高的.container .box样式都会被优先应用到页面里的.box元素上，覆盖掉单独.box的样式规则。

如果想要让单独的.box样式生效，可以通过提升它的权重来实现（比如给选择器增加更多类前缀，或者不推荐的!important声明），或者调整选择器的写法确保其权重更高。

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