检查 CSS 文件是否真正加载成功
页面没效果，第一反应不该是选择器写错了，而是确认样式表压根有没有被浏览器读到。打开开发者工具的 Network 面板，过滤 css，看对应文件状态码是不是 200；如果是 404 或 304 但内容为空，说明路径写错、服务未托管、或构建后文件名哈希不匹配（比如 webpack 输出了 main.a1b2c3.css，但 html 还在引用 main.css）。
- 相对路径容易出错：HTML 在
/admin/user.html，而 CSS 引入写的是./styles/base.css，实际会找/admin/styles/base.css，不是你预期的项目根目录下的路径 - 使用绝对路径更可控：以
/styles/base.css开头（注意开头的/），确保从域名根开始解析 - vite / Next.js 等现代工具中，CSS 若放在
public/下需用绝对路径；若在src/中，则应通过 js import，而非 HTML link —— 否则可能因打包未包含而静默失效
确认选择器是否匹配到目标元素
即使 CSS 加载了，也可能因为选择器根本没命中元素。右键「检查」目标 dom，看开发者工具的 Styles 面板里有没有你的规则出现；如果没有，说明选择器字符串和实际 HTML 结构对不上。
- 大小写敏感：
.Header不会匹配class="header"（HTML class 属性本身不区分大小写，但 CSS 选择器是区分的） - 空格陷阱：
.container .btn是后代选择器，匹配.container内任意层级的.btn；而.container.btn（无空格）是同时带两个 class 的单个元素 - 属性值要完整：
[type="submit"]不会匹配，得写成[type~="submit"]才能按空格分隔匹配单词 - 伪类时机问题：
a:visited在 chrome 中已限制可修改的样式属性（仅color、background-color等少数几个），设display: none是无效的
排查 CSS 作用域与层叠冲突
样式被覆盖比“没生效”更常见——它其实生效了，只是立刻被另一条更高优先级的规则干掉了。打开 Elements 面板，找到目标元素，看 Styles 侧边栏里你的声明是否被划掉（strikethrough）；如果有，点开那个被划掉的规则，往上翻，看是谁赢了。
- 优先级计算不只看
!important：内联样式 > ID 选择器 > 类/属性/伪类 > 标签/伪元素；.nav ul li a（3 类 + 2 标签 = 3,2）比#main-nav a.active（1 ID + 1 类 + 1 标签 = 1,1,1）优先级更高 - Shadow DOM 隔离：如果目标元素在自定义组件内部（如 vue 的
scoped、Web Components 的 shadow root），外部 CSS 默认无法穿透；需用::slotted()、:host或/deep/（已废弃，慎用）等机制显式透出 - CSS Modules 或
css-loader开启了modules时，类名会被哈希化，原始写的.button实际生成类似_button_1x2y3，HTML 中没同步改 class 就必然不生效
验证是否受浏览器特性或渲染时机影响
有些样式“看起来没效果”，其实是浏览器策略或 JS 干预导致的延迟或禁用。
立即学习“前端免费学习笔记（深入）”；
-
prefers-reduced-motion媒体查询会屏蔽动画：如果写了@media (prefers-reduced-motion: reduce) { * { animation: none !important; } }，而系统开启了“减少运动”，所有动画都会消失，包括你依赖动画触发的布局变化 - 字体未加载完成时，
font-display: block会让文字先空白几秒；若误以为“样式没起作用”，其实是字体还没来得及渲染 - JS 动态插入的元素（如 react 渲染后挂载的 DOM）不会自动继承 document 写死的
- 某些旧版 safari 对
aspect-ratio、contain等属性支持不佳，查 caniuse.com 对应aspect-ratio可知 ios 15.4+ 才支持，低版本需 fallback 用 padding-top 模拟
实际调试时，最省时间的做法是：先在 Elements 面板里手动给目标元素加一条 style（比如 border: 2px solid red !important），看能不能立刻显示；能，说明 DOM 和渲染通路没问题，问题一定出在选择器或层叠上；不能，就得回头查资源加载或 JS 干扰。很多“样式失效”的本质，是把 CSS 当作黑盒，而忘了它始终活在 HTML 结构、浏览器解析逻辑和 JS 运行时的夹缝里。