向 CSS 媒体查询添加重要信息答案

【问题标题】：Adding important to css media queries向 CSS 媒体查询添加重要信息
【发布时间】：2019-05-03 17:24:44
【问题描述】：

我有一个带有内联 css 和 css 媒体查询的 html 代码运行内联 css 时不会被媒体查询取代。我需要找到一种方法来动态地在媒体查询中的每种样式中添加那些 !important（可能与 js 一起使用）。除了以字符串形式遍历 html 内容并找到样式并添加它之外，还有其他方法可以做到这一点。我添加了一个示例代码供参考

  body {
          background-color: yellow;
        }
        @media only screen and (max-width: 600px) {
          body {
            background-color: lightblue;
          }
        }

    <body style="background-color:red;">
    </body>

【问题讨论】：

不，你需要一个脚本，我不会循环添加 !important 到你的外部 CSS 中。而是循环并删除内联 style 属性。 document.querySelectorAll('[style]') 将为您提供所有内联样式。
仅供参考，内联 CSS 在媒体查询中比您的 CSS 具有更好的特异性值。我还建议尝试删除上面提到的@LGSon 的样式属性。查看此内容以获取有关特异性值css-tricks.com/specifics-on-css-specificity 的更多信息
和 document.querySelectorAll('[style^="background-color"]') 所有这些都以给定的属性开头。更多关于属性选择器的信息：developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors
这篇文章有一个很好的起点，介绍了如何使用脚本处理样式：stackoverflow.com/a/7894886/2827823

标签： javascript css media-queries

【解决方案1】：

从body标签中移除内联css，因为内联css具有很高的特异性值

试试这个，在媒体查询中添加重要的内容，当屏幕尺寸改变时你需要lightblue背景颜色

body {
      background-color: yellow;
    }
    @media only screen and (max-width: 600px) {
      body {
        background-color: lightblue;
      }
    }

【讨论】：

如果删除了内联样式，则不需要!important。媒体查询出现在基本选择器之后，之后出现的任何内容都会覆盖以前的样式。
我无法删除内联 css。 html 内容来自服务器。我给你一个我的场景的例子
那我认为你需要这样做，sitepoint.com/javascript-media-queries