Question

我有一个内联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>

Answer 1

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

尝试一下，在媒体查询中添加重要内容，因为当屏幕尺寸更改时，您需要lightblue背景色

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

为CSS媒体查询添加重要内容

1 个答案: