为什么媒体查询中定义的字体颜色没有效果？答案

【问题标题】：Why are the font color defined in media queries not having effect?为什么媒体查询中定义的字体颜色没有效果？
【发布时间】：2018-05-09 11:27:24
【问题描述】：

为什么媒体查询中定义的字体颜色没有效果？例如，

@media (min-width: 576px){
    html {
        color: red !important;
        font-size: 1.2rem;
    }
}

字体大小有效果，但颜色没有效果，即使使用 !important。

这是使用 Bootstrap 4。

【问题讨论】：

Works just fine.
尝试在网络浏览器中使用开发者工具，看看应用了哪些样式；很可能另一种样式（例如 p 标签或正文）正在覆盖应用于 html 的样式。
他们是，你只是有其他东西可以推翻上述内容。 min-width: 576px 实际上与“red if no else is defined”相同 ...!important; 在这里没有帮助，因为您处于层次结构的最顶层。
现在它只需要更具体的选择器就可以工作了。

【解决方案1】：

如果你让父颜色起作用然后把所有的孩子都放在color:inherit 它会自动继承父颜色属性

【讨论】：

【解决方案2】：

你的代码没问题。

如果您使用的是 Chrome 浏览器，请右键单击文本 > 检查。在弹出的菜单中，在样式选项卡下，查看颜色属性。

【讨论】：