Media query修改font-size时text-1不生效问题求助

问题现象 #

• 多个带文本的div元素，在媒体查询中统一设置所有元素的font-size时，text-1的字体大小无变化，text-2可正常修改
• 媒体查询中修改color时，text-1的颜色能正常生效
• 已删除所有其他HTML/CSS元素，问题仍存在

核心原因 #

这是CSS选择器优先级冲突导致的：

• text-1的基础样式中，大概率用了更具体的选择器（比如类选择器.text-1）直接设置了font-size
• 媒体查询中你用的是全局选择器（比如*或div），优先级低于类选择器，所以font-size的设置被覆盖
• 而color在text-1的基础样式中可能没被设置，或者优先级相同，所以媒体查询的设置能生效

解决方法 #

方法1：提升媒体查询中选择器的优先级 #

把媒体查询里的选择器改成和基础样式匹配的具体选择器，比如：

@media (max-width: 768px) {
  .text-1, .text-2 {
    font-size: 14px;
    color: #333;
  }
}

方法2：调整基础样式优先级 #

如果text-1的基础font-size不是必须用高优先级设置，可以把基础样式的选择器改成和媒体查询一致的全局选择器，或者降低其优先级。

方法3：临时使用!important（不推荐） #

如果暂时无法调整选择器优先级，可以临时用!important强制生效，但会增加后续样式维护难度：

@media (max-width: 768px) {
  * {
    font-size: 14px !important;
    color: #333;
  }
}

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