CSS规则未被后面的其他规则覆盖

Question

我在两个具有不同值的CSS瓦片中都有以下代码(使用LESS(。CSS链接在标题中的链接标记中。CCD_ 1位于CCD_ 2之前。问题是，当我浏览网站时，我看不到任何更改，它只使用all.css中的代码，而不是用override.css中的代码覆盖它。

#subheader h1 {
font-size: 3vw;
@media screen and (max-width: 39.9375em) {
font-size: 3vw;
}
@media screen and (min-width: 40em) {
font-size: 3vw;
;
}
/* Large and up */
@media screen and (min-width: 64em) {
font-size: 3vw;
}
}

如何在不使用!important的情况下使规则覆盖？

LESS编译没有问题，它会生成一个正确的CSS文件，这就是为什么我不知道它为什么不起作用。

Answer 1

您在编写css@media规则时使用了完全错误的语法。按照这个w3schools链接，正确的语法应该是：

@media not|only mediatype and (media feature and|or|not mediafeature) {
CSS-Code;
}

正确的代码是：

#subheader h1 {
font-size: 3vw;
}
@media screen and (max-width: 39.9375em) {
#subheader h1 {
font-size: 3vw;
}
}
@media screen and (min-width: 40em) {
#subheader h1 {
font-size: 3vw;
}
}
/* Large and up */
@media screen and (min-width: 64em) {
#subheader h1 {
font-size: 3vw;
}
}

Answer 2

试试这个：

#subheader h1 {
font-size: 3vw;
}
@media screen and (max-width: 39.9375em) {
font-size: 3vw;
}
@media screen and (min-width: 40em) {
font-size: 3vw;
;
}
/* Large and up */
@media screen and (min-width: 64em) {
font-size: 3vw;
}