gpt4 book ai didi

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

转载 作者:太空宇宙 更新时间:2023-11-03 22:37:40 28 4
gpt4 key购买 nike

我正在为现有系统编写一些 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?

最佳答案

实际上,媒体查询不会使特异性更高。这就是您在他们正在修改的声明之后声明它们的原因。因此,只要您处理媒体查询中包含的所有属性(并且它们的特异性仍然相同),在您的 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;
}

在任何屏幕尺寸上,它现在都是灰色

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


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

现在它将有灰色背景,除非屏幕尺寸达到600px,否则它将有蓝色颜色。 979px667px 将被忽略。


关于该主题的更多信息:

Calculating specificity - W3C 规范

关于css - 使用自定义 CSS 覆盖媒体查询中的样式,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45568947/

28 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com