为何媒体查询中使用html选择器无法修改背景色？

这是典型的CSS选择器**优先级（特异性）**冲突问题，细节拆解如下：

• 初始样式的权重拆分：html, .large是分组选择器，两个选择器各自独立计算权重：

  • html是元素选择器，权重为 0,0,1
  • .large是类选择器，权重为 0,1,0
    如果你的<html>标签带有large类，那么.large的权重高于html元素选择器，此时html的背景色是由.large类设置的，而非html选择器本身。

• 媒体查询不改变优先级：媒体查询仅控制样式的生效条件，不会提升选择器的权重。你在@media(max-width: 600px)里用的html选择器，权重还是0,0,1，低于.large的0,1,0，所以即使媒体查询触发，它的背景色样式也会被初始的.large样式覆盖，看不到变化。

• 两种生效场景的原因：

  • 换成body选择器时，body的样式和作用在html上的.large样式没有优先级冲突，因此能正常设置body的背景色（若html未设置背景，body背景会延伸至整个视口）。
  • 当你把初始样式改成仅用html选择器时，媒体查询里的html和初始html权重相同，若媒体查询样式写在初始样式之后，会按代码顺序覆盖初始样式，背景色自然生效。

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