时间戳

首页 > 解决方案 > CSS 规则没有被其他规则覆盖

css - CSS 规则没有被其他规则覆盖

问题描述

我在两个具有不同值的 CSS 磁贴中都有以下代码（使用 LESS）。CSS 链接在标题中的链接标记中。位于all.css之前override.css。问题是，当我浏览该站点时，我看不到任何更改，并且它仅使用 in 中的代码，all.css而不是用 .in 中的代码覆盖它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 文件，这就是为什么我不知道它为什么不起作用的原因。

标签： css

解决方案

您正在使用完全错误的语法来编写 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;
  }
}

推荐阅读