css - 我可以赋予一整套样式高于其他样式声明的重要性吗？

Question

是否可以赋予一整套样式至高无上的重要性？

即，早期您可能具有以下默认 css:

<link rel="stylesheet" href="/style.css" type="text/css" media="screen" />

里面有

    body {
       background: #000;
    }

    h1 {
       color: #fff;
    }

但是 (!) 您决定让事情变得令人兴奋，并在标签内添加一些相同但不同的 css:

<style type="text/css">
    body {
       background: #fff;
    }

    h1 {
       color: #000;
    }
</style>

无论出于何种原因，链接的 style.css 中的样式比我静态放入的样式更重要。

我想知道的是，是否有一种方法可以将一大堆样式归为一类，以便它们具有最高的重要性？我知道的最好的是

<style type="text/css">
    body {
       background: #fff !important;
    }

    h1 {
       color: #000 !important;
    }
</style>

如果有很多样式，这会开始变得有点乏味。

Answer 1

向 body 添加一个类，即 body class="stylecatcher" 或其他

然后您可以轻松地设置样式(并覆盖默认样式)

<style type="text/css">
    body.stylecatcher {
       background: #fff;
    }

    .stylecatcher h1 {
       color: #000;
    }
</style>

我认为使用 !important 选择器不是一个好习惯。