CSS媒体查询设置font-size字体大小不生效如何解决

CSS样式生效遵循权重优先规则，只有当新样式的选择器权重大于等于原有同属性样式的权重时，才能完成覆盖。
你的代码里：

• 基础样式中控制字体大小的选择器是.sidebar .sidebar-link div，权重值为2个类选择器+1个元素选择器
• 媒体查询中写字体大小的选择器是.sidebar div，权重值为1个类选择器+1个元素选择器，权重低于基础样式的规则，因此无法覆盖原有的font-size:10px设置
  其余样式（侧边栏宽度、sidebar-link的布局属性）的选择器权重和基础样式中对应规则完全一致，根据CSS“同权重后写覆盖前写”的规则，这部分可以正常生效。

把媒体查询中div的规则嵌套到.sidebar-link选择器内部，保证选择器权重和基础样式匹配即可，修正后代码如下：

@media (min-width: 1200px) {
    .sidebar {
        width: 250px;

        .sidebar-link {
            flex-direction: row;
            justify-content: left;
            margin-left: 22px;

            div {
                font-size: 16px;
            }
        }
    } 
}

如果不想调整嵌套结构，也可以直接写全选择器路径保证权重一致：

@media (min-width: 1200px) {
    .sidebar {
        width: 250px;
    }
    .sidebar .sidebar-link {
        flex-direction: row;
        justify-content: left;
        margin-left: 22px;
    }
    .sidebar .sidebar-link div {
        font-size: 16px;
    }
}

内容的提问来源于stack exchange，提问作者Ninna Svanström