使用自定义 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

实际上媒体查询不会提高特异性。这就是您在他们正在修改的声明之后声明它们的原因。因此，以您的 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 规范

Answer 2

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

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

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

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

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

然后定义您的新媒体查询