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选择器是一个好习惯。

Answer 2

您需要的是特异性。来自w3 here和here以及adobe link

Answer 3

通常在CSS中，如果您在文档中添加一个相同的选择器，则最接近结尾的那个（最高行号）将生效。

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

    h1 {
       color: #fff;
    }

    body {
       background: #fff;
    }

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

背景为白色，字体颜色为黑色。

我可以将一整套样式赋予其他样式声明至关重要的位置吗？

3 个答案: