Question

我想覆盖h1代码的font-size，但它不会这样做我有一些h1标签的规范，但不是它的字体大小：

#carousel-index .carousel-inner .item .slide_info h1 {
    color: #005e9c;
    font-weight: 300;
}

和字体大小我有这个

h1, .h1 {
    font-size: 36px;
}

这是我的媒体查询

@media (max-width: 1224px){
    h1{
        font-size:30px;
    }
}

但它仍然是36px而不是30px

Answer 1

@media规则用于为不同的媒体类型/设备定义不同的样式规则，并且它已经给出了语法。正确的CSS语法应该是：

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

在你的情况下：

@media only screen and (max-width: 1224px){
    h1, .h1{
        font-size:30px;
    }
}

此外，根据CSS规则的顺序（即浏览器解释它们的方式），您可能需要在font-size之后添加!important;。

Answer 2

您可以使用!important

强制覆盖

@media (max-width: 1224px){
h1{
    font-size:30px !important;
}
}

Answer 3

您的媒体查询必须遵循＆＃39;标准＆＃39;规则：

h1, .h1 {
    font-size: 36px;
    color: blue;
}

@media (max-width: 1224px){
    h1{
        font-size:30px;
        color: red;
    }
}