求助：CSS中Media Screen语法不生效问题 附代码示例

我帮你梳理下代码里的几个关键错误，这些问题直接导致了媒体查询和基础样式都无法正常工作：

1. CSS属性值语法错误 #

你的基础样式里写了：

#main { display: flex, inline-flex; }

CSS里属性值不能用逗号同时声明多个，display只能选择一个有效值，比如display: flex;或者display: inline-flex;。这个语法错误会让浏览器直接忽略整个#main的基础样式规则，后续的媒体查询样式自然也会受影响。

2. 无效的CSS选择器 #

你用了a:-web-link-any这个选择器，这是个拼写错误且非标准的写法。如果要选中#main下的链接，直接用#main a就可以；如果要针对未访问的链接，用标准伪类a:link即可。

3. 媒体查询内的样式结构错误 #

媒体查询里的#main { a:-web-link-any { ... } }是无效的嵌套写法——原生CSS不支持这种嵌套选择器（除非用Sass/LESS这类预处理器），必须写成#main a { ... }的扁平结构。

修正后的完整代码 #

/* 基础样式 */
#main {
  display: flex; /* 二选一，这里用flex举例 */
}
#main a {
  margin: 30px;
}

/* 媒体查询：屏幕宽度≤1064px时生效 */
@media screen and (max-width: 1064px) {
  #main a {
    /* 这里可以写你想要的响应式样式，比如调整margin */
    margin: 15px;
  }
}

<div id="main">
  <a href="">test</a>
</div>

另外给你几个排查媒体查询的通用小技巧：

• 检查媒体查询的语法细节，比如括号、逻辑运算符有没有写错
• 确认没有其他优先级更高的样式（比如带!important的规则）覆盖了媒体查询里的样式
• 可以用浏览器开发者工具的「响应式视图」测试，直观查看媒体查询是否被正确触发

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