CSS 不应用媒体查询

Question

我目前遇到以下问题:

Default CSS overwriting Media Query

我正在使用两个由 GULP SASS 处理的 CSS 文件，我在 HTML 的头部声明了它们，如下所示:

HTML Head

代码非常简单，我这样做只是为了测试一下:

在 styles.scss 上:

h1 {
    color: #E5E1DD;
    font-family: 'Megrim', cursive;
    font-size: 6rem;
    margin-bottom: 0;
    text-align: center;
    margin-top: 90px;
    opacity: 1;
    transform: scale(1);
    transition: transform 0.5s ease, opacity 1s ease;
}

在 queries.scss 上:

@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
    h1 {
        font-size: 1rem;
    }
}

如果我在 queries.scss 上使用 !important 声明，它们最终会起作用，但我确信这不是解决问题的最佳方法。

非常感谢您的帮助!

Answer 1

媒体查询中的选择器需要至少具有相同的特性才能覆盖前面的 CSS，因此它需要是

.hero h1 { ... }