flex容器上直接写子元素选择器不会失效，失效主因是忽略flex项默认行为及属性优先级规则：flex属性会覆盖width，order需显式不同才生效，margin-left:auto会覆盖justify-content，伪类按DOM顺序匹配而非视觉顺序。
flex 容器上直接写选择器会失效？
很多人在 .container { display: flex; } 后，对子元素用 .container > div 写样式却没反应，其实不是选择器失效，而是忽略了 flex 项（flex item）的默认行为：它们会忽略 float、vertical-align，且 margin 合并规则不同。关键点在于——flex 布局中起作用的是容器属性（display: flex、flex-direction 等），而子元素是否“被控制”，取决于你是否用对了 flex 项专属属性，比如 flex、align-self、order。
子元素 class 名和 flex 属性混用时的优先级陷阱
当你同时给子元素写 .item { width: 100px; } 和 .item { flex: 1; }，实际渲染以 flex 为主导：flex: 1 会覆盖 width（除非设为 flex: 0 0 100px）。常见误操作：
- 用
width+flex: 1期望固定宽+自适应共存 → 应改用flex: 0 0 100px（不伸缩、不收缩、基准宽 100px） - 对多个
.item设置相同order却以为能排序 →order必须显式不同才生效，且只影响视觉顺序，不影响 DOM 结构 - 在容器上设
justify-content: space-between，但子元素用了margin-left: auto→ 后者会覆盖前者，造成意外留白
伪类选择器配合 flex 的实用组合
flex 布局中，:first-child、:last-child、:nth-child(n) 依然可用，但要注意：它们匹配的是 DOM 顺序，不是 flex 排序后的视觉顺序。若用 order 调整了位置，:nth-child(2) 仍指第二个子元素，不是视觉上排第二的那个。
更可靠的写法是结合类名与 flex 属性：
.sidebar { flex: 0 0 240px; }
.main { flex: 1; }
.footer { order: -1; }
这样比依赖 :nth-child() 更稳定，也方便后续维护。
响应式中媒体查询与 flex 选择器嵌套的坑
不要在媒体查询里重复写容器选择器，比如：
@media (max-width: 768px) {
.container { display: flex; flex-direction: column; }
.container > .item { flex: 1; } /* ❌ 多余，且易覆盖原样式 */
}
正确做法是只改影响布局的关键属性，其余复用已有类：
@media (max-width: 768px) {
.container { flex-direction: column; }
.sidebar { flex: none; width: 100%; }
}
flex 的真正复杂点不在语法，而在“容器属性”和“项目属性”的职责边界——一旦混淆，样式就会看似随机生效或失效。最常被忽略的是 flex-basis 的默认值（auto）和它与 width 的交互逻辑。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
