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;
}

II。覆盖一个属性更改，但没有2个断点，但只有1个断点，例如在600px？

#criterionDetailsWrapper {
   background-color: grey;
}


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

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

Answer 1

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

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

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

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

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

然后定义新的媒体查询

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

1 个答案: