HTML结构错误是CSS失效的主因，如标签误写、class/id拼错、嵌套非法等；选择器失效多因匹配路径中断或优先级混乱；Flex布局需注意wrap、basis、content等属性行为差异；调试须区分临时修改与真实代码。
HTML 结构写错，CSS 就永远套不上
很多初学者卡在“写了 CSS 却没效果”，八成是 HTML 根本没写对。浏览器不认标签、属性拼错、嵌套乱套，class 拼成 clss，id 里用了空格或大写字母，都会让选择器完全失效。
-
class和id值只能用字母、数字、下划线、短横线，且不能以数字开头 - 别在
div里直接放p以外的块级元素（比如把section塞进p）——浏览器会自动闭合，结构就歪了 - 用浏览器右键「检查」看实际渲染出的 DOM，不是看你写的源码——它可能已经帮你“修正”错了
CSS 选择器为什么总不生效
不是优先级不够，就是匹配路径断了。最常见的是层级过深、伪类写错位置、或者用了未支持的语法（比如在旧版 Safari 里用 :has()）。
-
.nav a匹配的是.nav内部任意后代的a；.nav > a只匹配子元素，漏掉一层就失效 -
:hover必须写在被交互的元素上，div:hover p是合法的，但p:hover div不行——p上没div - 用
!important临时调试可以，但上线前得理清真实优先级：内联样式 > ID > 类/属性/伪类 > 元素/伪元素
Flex 布局一加 flex-wrap 就乱套
默认 flex-wrap: nowrap，所有子项强行挤在一行，溢出也不换行。加上 wrap 后，行为突变：主轴尺寸不再约束，交叉轴变成多行堆叠，align-items 变成每行独立生效。
-
flex-basis设为0%或0px，再配合flex-grow: 1，才能真正均分容器宽度 -
align-content控制的是“多行之间的间距”，单行时完全无效；想控制单行对齐，只用justify-content - 移动端小屏下，
flex-direction: column比媒体查询更直接，但记得重置height或min-height，否则内容可能塌缩
Chrome DevTools 里改对了，页面刷新就没了
这是本地开发最典型的幻觉——你在 Elements 面板里手动改了 style 属性或临时加了 class，只是内存里的快照，不写进文件，自然一刷归零。
立即学习“前端免费学习笔记（深入）”；
- 右键元素 →「Break on attribute modifications」可捕获 JS 动态删 class 的行为
- 在 Styles 面板里点
element.style右侧的「+」号，能新建临时规则，但仅当前 Tab 有效 - 真要验证 CSS 效果，改完立刻复制代码，粘贴到你的
style.css或<style></style>块里，再刷新
真正难的不是记住多少属性，而是每次改动后，能快速判断问题出在 HTML 结构、选择器匹配、层叠逻辑，还是渲染引擎限制。这几个点卡住一次，比抄十遍教程记得牢。
