CSS嵌套样式写法有误？.media类下img元素样式未生效问题咨询

安全阿岳

2026-8-27

问题原因

你的CSS嵌套规则写法不符合规范，是导致img样式不生效的直接原因。
原生CSS嵌套语法要求：嵌套的子选择器如果要作为父选择器的后代/关联选择器，必须显式使用嵌套标识符&来锚定父级关系，直接裸写元素选择器的嵌套规则会被浏览器判定为无效语法直接丢弃，不会应用到页面上。
你写的代码中，父级.media的容器样式本身是可以正常生效的，只有内部嵌套的img规则因为语法错误被忽略。

修复方案

根据你的项目场景选一种写法即可：

方案1：标准原生CSS嵌套写法（适配2023年后发布的现代浏览器，Chrome 112+、Safari 16.5+、Firefox 117+原生支持）

.media {
  width: 300px;
  height: 200px;
  overflow: hidden;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  /* 用&指代父选择器.media，明确后代关系 */
  & img {
    max-width: 100%;
    height: auto;
  }
}

如果要严格匹配.media的直接子元素img（和你当前HTML结构完全对应），可以把选择器写成& > img，效果一致。

方案2：传统平级写法（全浏览器兼容，不需要考虑嵌套特性支持度）
如果需要兼容旧版本浏览器，或者项目没有配置CSS预处理器，可以直接拆成两个平级规则，不需要嵌套：

.media {
  width: 300px;
  height: 200px;
  overflow: hidden;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}
.media img {
  max-width: 100%;
  height: auto;
}