Question

我在两个具有不同值的CSS磁贴中都有以下代码（使用LESS）。 CSS在标题的链接标记中链接。 all.css位于override.css之前。问题是，当我浏览该站点时，看不到任何更改，它仅使用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 link，正确的语法应为：

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

CSS规则之后没有被其他规则覆盖

2 个答案: