最稳妥方式是.container img选后代，.container > img仅选直接子级；用[data-module="hero-banner"] img避免误伤；注意img默认inline需设display: block，并用aspect-ratio控比例。
怎么用CSS精准选中某个div里的img而不影响其他图片
直接写 .container img 是最常用也最稳妥的方式，但要注意它会匹配所有嵌套层级的 img，包括子容器里的。如果只想选“直接子级”，得用 .container > img；如果容器有动态类名或结构不固定，靠类名可能漏选，这时候得结合属性选择器或数据属性更可靠。
为什么加空格和加>符号结果差很多
空格表示后代选择器，.gallery img 会命中 <div class="gallery"><section><img></section></div> 里的 img；而 .gallery > img 只认父元素直接子节点，上面例子就选不到——因为 img 的父级是 section，不是 .gallery。实际项目里多数场景要的是“后代”，不是“直系”，别一上来就用 >。
遇到class重复、结构混乱时怎么避免误伤
当多个模块共用类似结构（比如多个 .card 都含 img），光靠 .card img 会全局生效。这时优先给目标容器加唯一标识：
- 用语义化 data 属性：
<div data-module="hero-banner"><img></div>→ 选它：[data-module="hero-banner"] img - 避免用序号类名（如
.item-1），改用功能描述类名（如.product-thumbnail） - 如果必须依赖层级，检查是否真需要三层以上嵌套选择器（如
.main .content .figure img），这种写法脆弱且难维护
图片加载前/后样式错乱的常见原因
用 img 选择器设置宽高或圆角时，容易在图片未加载完成时失效，尤其配合 object-fit 或背景图方案混用时。关键点：
立即学习“前端免费学习笔记（深入）”；
-
img默认是 inline 元素，记得加display: block或vertical-align: middle防文字基线留白 - 用
aspect-ratio控制比例比单纯设height更稳，但注意 Safari 15.4+ 才支持 - 如果容器本身用了
overflow: hidden，而图片又没设max-width: 100%，可能被意外裁切
层级选择器看着简单，真正卡住人的往往是 DOM 结构变动后选择器突然失效，或者图片加载时机导致样式没及时应用——盯住浏览器开发者工具里 Elements 面板实时高亮，比背规则管用。
