CSS样式没生效最常见的原因是选择器未匹配目标元素，需用开发者工具确认是否命中或被覆盖，并核对HTML结构、选择器写法、加载状态及作用域限制。
CSS样式没生效，最常见的原因是选择器没匹配到目标元素。先确认HTML结构和CSS选择器是否对得上。
检查元素是否真的被选中
打开浏览器开发者工具（F12），选中目标元素，在右侧“Styles”面板里看你的CSS规则是否出现。如果完全没显示，说明选择器没命中；如果出现了但被划掉，说明被其他更高优先级的样式覆盖了。
核对选择器写法和HTML标签名
比如你写了 div.content，但HTML里是 <section class="content">，那 div.content 就不会生效——因为 section 不是 div。要改成 section.content 或直接用 .content。
- 标签名必须完全一致（区分大小写，且HTML中通常全小写）
- 类名、ID名注意拼写和点号/井号是否遗漏（
.btn≠btn，#header≠.header） - 嵌套关系要和HTML层级一致（
nav ul li a要求a真的在li内，再在ul内，再在nav内）
留意CSS加载顺序和作用域
样式表是否真的加载成功？检查Network面板里CSS文件状态码是不是200。另外，如果用了<style scoped>（如Vue单文件组件），或Shadow DOM，普通全局CSS默认不穿透进去，需要额外写法（如:deep()或::slotted）。
立即学习“前端免费学习笔记（深入）”；
排除继承与display影响
有些CSS属性不继承（如margin、width），别误以为父元素设了子元素就会有；还有元素display: none或visibility: hidden时，样式虽存在但不可见，容易误判“没生效”。可临时加个明显样式（如outline: 2px solid red）快速验证是否选中。
不复杂但容易忽略，多看一眼开发者工具里的实际匹配结果，比反复改代码更高效。
