CSS样式没生效最常见的原因是选择器未匹配目标元素，需用开发者工具确认是否命中或被覆盖，并核对HTML结构、选择器写法、加载状态及作用域限制。

CSS样式没生效，最常见的原因是选择器没匹配到目标元素。先确认HTML结构和CSS选择器是否对得上。

检查元素是否真的被选中

打开浏览器开发者工具（F12），选中目标元素，在右侧“Styles”面板里看你的CSS规则是否出现。如果完全没显示，说明选择器没命中；如果出现了但被划掉，说明被其他更高优先级的样式覆盖了。

核对选择器写法和HTML标签名

比如你写了 div.content，但HTML里是 <section class="content"></section>，那 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></style>（如Vue单文件组件），或Shadow DOM，普通全局CSS默认不穿透进去，需要额外写法（如:deep()或::slotted）。

HTTP状态码查询

查询网站的HTTP响应状态码，判断网站是否正常访问、是否重定向、是否存在错误。适用于"HTTP状态码查询""网站状态查询""HTTP状态检测""网页状态码""网站响应码""301重定向查询"等请求。通过本地 Python 脚本调用网站HTTP状态查询接口，并使用环境变量中的专属 API Key。

下载

立即学习“前端免费学习笔记（深入）”；

排除继承与display影响

有些CSS属性不继承（如margin、width），别误以为父元素设了子元素就会有；还有元素display: none或visibility: hidden时，样式虽存在但不可见，容易误判“没生效”。可临时加个明显样式（如outline: 2px solid red）快速验证是否选中。

不复杂但容易忽略，多看一眼开发者工具里的实际匹配结果，比反复改代码更高效。