最常见原因是选择器未匹配到任何元素；应先用开发者工具Elements面板点击目标节点，检查Styles面板是否显示对应CSS规则，若未出现则说明选择器不匹配、元素不存在、拼写错误、大小写或连字符不符、伪类误用、特异性被覆盖、作用域隔离、加载失败或渲染被隐藏。
检查选择器是否真的匹配到目标元素
样式没生效但控制台没报错，最常见原因是选择器压根没选中任何元素。浏览器不会为“选不到”报错，它只是默默跳过——这恰恰是最容易被忽略的起点。
打开开发者工具，切换到 Elements 面板，手动点击目标 DOM 节点，右侧 Styles 面板会列出所有命中该节点的 CSS 规则。如果完全没看到你写的那条规则，说明选择器不匹配。
- 确认元素是否存在（比如 JS 动态插入的节点，CSS 加载时可能还不存在）
- 检查元素是否有拼写错误：比如
class="btn-primary"但 CSS 写了.btn-prmiary - 注意大小写和连字符：HTML 中
data-role="modal"对应 CSS 的[data-role="modal"]，不是[dataRole="modal"] - 检查是否误用了伪类或伪元素：比如把
a:visited当成普通状态用，实际只对已访问链接生效
验证 CSS 特异性（specificity）是否被覆盖
即使选择器匹配了，也可能被更高优先级的规则盖掉。此时 Styles 面板里你的样式会显示为灰色、带删除线，旁边标着 overridden。
不要只看有没有声明，要看它是否“胜出”。特异性由四元组计算：内联样式 > ID > 类/属性/伪类 > 元素/伪元素。
立即学习“前端免费学习笔记（深入）”；
- 避免滥用
!important，先理清层级：比如#header .nav li a比.menu-link优先级高 - 注意继承性：
color和font-size可继承，但margin、width不会，别指望父元素设了margin: 10px子元素就自动有外边距 - 检查是否在组件 scoped CSS（如 Vue 的
）里写了全局选择器，导致作用域隔离失效
排查加载顺序与作用域限制
CSS 是从上到下解析的，后加载的同权重规则会覆盖前面的；同时，某些环境（如 Shadow DOM、scoped style、CSS-in-JS）天然隔离样式作用域。
- 查看 Network 面板确认 CSS 文件是否真实加载成功（状态码 200，内容非空），有时 304 缓存返回空响应却不报错
- 检查
标签位置：放在底部的 CSS 可能延迟应用，且部分浏览器不支持 body 内 link - 如果是 Web Components 或 React/Vue 组件，确认样式是否被封装：比如 Shadow Root 内的元素不会受外部 CSS 影响，除非显式用
:host或::slotted - 检查是否启用了 CSS 模块化（如
import styles from './Button.module.css'），此时类名已被哈希重命名，直接写.button不生效
留意 display、visibility 和继承链断裂
有时候样式确实应用了，但视觉上“看不见”，原因常和渲染行为有关，而非选择器问题。
-
display: none会彻底移除元素渲染流，后代元素样式再正确也无意义 -
visibility: hidden保留占位，但子元素若设了visibility: visible仍可显示——这点常被误判 - 检查父容器是否设置了
overflow: hidden且子元素溢出，或者transform: scale(0)导致内容不可见 - 字体相关属性如
font-family写了不存在的字体名，浏览器会静默回退到默认字体，不报错也不提示
真正卡住的时候，往往不是语法错了，而是你写的那行 CSS 压根没机会执行——它没选中元素、被别的规则压垮、加载太晚、或者被封装在另一个 DOM 树里。动手前，先点开 Elements 面板盯死那个节点的 Styles 栏，比反复改选择器更省时间。
