屏幕宽度缩至824px时，导航栏<li>字体大小未按预期变化

问题描述 #

当屏幕宽度缩小至824px时，尝试修改导航栏<li>（.header__item）的样式（如字体大小、颜色）未生效，但同一区域的.header__header元素样式可正常响应媒体查询。

代码片段 #

HTML #

<section class="header">
    <div class="container">
        <ul class="header__list">
            <li class="header__item"><a class="header__link" href="#">Home</a></li>
            <li class="header__item"><a class="header__link" href="#">About</a></li>
            <li class="header__item"><a class="header__link" href="#">Contacts</a></li>
            <li class="header__item"><a class="header__link" href="#">Recommendations</a></li>
        </ul>
        <h1 class="header__header">
            Reptile - nursery with snakes, lizards, and other cold-blooded.
        </h1>
        <button class="header__button">Learn more</button>
    </div>
</section>

styles.scss #

.header__list {
    padding: 0;
    display: flex;
    justify-content: center;
    margin-top: 0;
    margin-bottom: 200px;
    .header__link {
        font-size: 20px;
        position: relative;
        &:before {
            content: '';
            width: 100%;
            height: 1px;
            background-color: white;
            position: absolute;
            left: 0;
            bottom: -5px;
            transform: scaleX(0);
            transition: 0.2s;
        }
        &:hover::before {
            transform: scaleX(1);
            transition: transform 0.2s;
        }
    }
}

adaptive.scss #

@media (max-width:824px) {
    .header {
        .header__item {
            color: red;
        }
    }
}

问题原因 #

1. 选择器层级错误：HTML结构中.header__item并非直接嵌套在.header下，而是位于.header > .container > .header__list内部，原媒体查询中的.header .header__item无法匹配到目标元素。
2. 字体样式作用对象错误：字体大小直接设置在<a>标签（.header__link）上，即便选中.header__item，修改它的字体大小也不会生效——<a>标签的字体样式优先级更高。

修复方案 #

修改adaptive.scss中的媒体查询，调整选择器层级，并针对.header__link设置字体样式：

@media (max-width:824px) {
    // 修改li元素的样式（如背景色等）
    .header .header__list .header__item {
        background-color: #f0f0f0;
    }
    // 针对链接修改字体大小与颜色
    .header .header__list .header__link {
        font-size: 16px;
        color: red;
    }
}

若不存在样式冲突，也可使用更简洁的写法：

@media (max-width:824px) {
    .header__list .header__item {
        /* li元素的样式 */
    }
    .header__list .header__link {
        font-size: 16px;
        color: red;
    }
}

验证要点 #

• 用浏览器开发者工具的元素检查功能，确认媒体查询的选择器是否正确匹配到目标元素。
• 对于文字样式，优先检查直接包裹文字的标签（如本例的<a>），这类元素的样式会覆盖父元素的继承样式。

内容的提问来源于stack exchange，提问作者user20743167