html - CSS 媒体查询未覆盖

Question

我不能安静地解决这个问题。我对 html 和 css 还是很陌生，但之前使用过媒体查询，但这次虽然它适用于一个元素（子标题），但它不适用于另一个元素（标题）。

/* =============Standards for Texts============== */
.sub-header {
    font-size: 1.3rem;
    font-weight: 200;
    color: hsl(229, 6%, 66%);
    margin-top: 6ch;
}

.header {
    font-size: 1.3rem;
    font-weight: 600;
    color: hsl(234, 12%, 34%);
}

.description {
    font-size: 1rem;
    font-weight: 400;
    color: hsl(229, 6%, 66%);
}

body > .sub-header, header {
    font-size: 1.5rem;
}

/* ===============Port to Desktop=============== */
@media (min-width: 800px) {
    html, body {
        width: 100%;
        height: 100%;
    }


    body > .sub-header, header {
        font-size: 3rem;
        color: red;
    }

在此处输入图像描述

标签： htmlcssoverridingmedia-queries

Answer 1

header您的 CSS 中缺少一个句点。

/* This targets a <header> tag */
header { }

/* This targets any element with a class named header */
.header { }