使用自定义覆盖媒体查询中的样式 CSS

Question

我正在为现有系统编写一些 overrides.css，想知道我可以通过哪些方式覆盖某些样式。我无法访问系统 css，所以我无法重写它。

如果我在原系统中有如下定义：

#criterionDetailsWrapper {
    background-color: green;
}

@media screen and (max-width: 979px) {
    #criterionDetailsWrapper {
        background-color: blue;
    }
}


@media screen and (max-width: 667px) {
    #criterionDetailsWrapper {
        background-color: grey;
    }
}

如何覆盖这些样式，例如拥有

我。一个属性覆盖所有维度：

.criterionDetailsWrapper {
   background-color: grey;
}

二．覆盖一个属性更改为没有 2 个断点，但只有 1 个断点，例如在 600px?

#criterionDetailsWrapper {
   background-color: grey;
}


 @media screen and (max-width: 600px) {
    #criterionDetailsWrapper {
        background-color: blue;
    }
}

是 !important 唯一的方法吗，或者我需要模仿所有选择器（以获得相同的特异性）并确保我的自定义 CSS 呈现在最后?

Answer 1

我：我会建议按照你说的添加特异性检查元素，你可以确保你的class有优先权。

.parents ....  #criterionDetailsWrapper {
   background-color: grey;
}

使用 !important 是一种不好的做法，但仍然有效...

II：您不能取消定义 css 媒体查询，而是可以根据需要覆盖它

@media screen and (max-width: 600px) {
    .parents...  #criterionDetailsWrapper {
        background-color: blue;
    }
}

然后定义新的媒体查询

Answer 2

实际上媒体查询不会提高特异性。这就是您在他们正在修改的声明之后声明它们的原因。因此，只要您处理媒体查询中包含的所有属性（并且它们的特异性仍然相同），以您的 css 样式声明它们就足够了。

记得在要覆盖的样式之后加载 overrides.css。

还有丑陋的 hack（但完全符合 css 规范），允许您通过将 class 和 id 选择器与它们自己链接来对抗特异性。

.class.class 的特异性高于 .class，但低于 .class.class.class.

这很糟糕，但可能比 !important 引起的问题更少。

在您的情况下，只要 override.css 出现在您修改的样式表之后，您提出的示例就应该有效。

// orginal.css
#criterionDetailsWrapper {
    background-color: green;
}

@media screen and (max-width: 979px) {
    #criterionDetailsWrapper {
        background-color: blue;
    }
}


@media screen and (max-width: 667px) {
    #criterionDetailsWrapper {
        background-color: grey;
    }
}

将被覆盖：

// override.css
#criterionDetailsWrapper {
    background-color: grey;
}

现在在任何屏幕尺寸上都是 grey。

// override.css
#criterionDetailsWrapper {
   background-color: grey;
}


@media screen and (max-width: 600px) {
    #criterionDetailsWrapper {
        background-color: blue;
    }
}

它将有 grey 背景，除非屏幕尺寸达到 600px，届时它将有 blue 颜色。 979px 和 667px 将被忽略。

有关该主题的更多信息：

Calculating specificity - W3C 规范

使用自定义覆盖媒体查询中的样式 CSS

Override styles in media queries with custom CSS

css

media-queries

css-specificity