CSS 媒体查询未覆盖

Question

我无法安静地解决这个问题。我对 html 和 css 还是很陌生，但之前使用过媒体查询，但这次虽然它对一个元素 (sub-header) 有效，但对另一个元素无效(header).

/* =============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;
    }

enter image description here

Answer 1

您在 CSS 中缺少 header 之前的句点。

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

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

Answer 2

您忘记在 header: .header 之前在您的媒体查询中添加点

CSS 媒体查询未覆盖

CSS Media Query Not Overriding

html

css

overriding

media-queries