CSS不生效主因是未加载或被覆盖：先查路径、rel属性及disabled；再用Network面板验200状态码和Content-Type；最后在Elements面板看样式是否被划掉或作用域限制。
检查
外部 CSS 文件没加载，样式自然不会生效。最常见的是 的 href 路径写错，比如相对路径漏了 ./ 或多了一层 ../，或者文件名大小写不一致（Linux 服务器区分大小写）。另外，rel="stylesheet" 必须写全，漏掉 rel 或写成 rel="style" 都会让浏览器忽略该链接。
-
href值建议用绝对路径（如/css/main.css）或以./开头的相对路径，避免靠浏览器自动补全 - 打开浏览器开发者工具的 Network 标签页，筛选
css，看对应文件状态码是不是200；如果是404，说明路径错了 - 检查 HTML 中是否意外加了
disabled属性（如），这会直接禁用样式表
确认 CSS 文件是否被其他
CSS 是层叠的，后加载的规则会覆盖先加载的——哪怕只是同个选择器、同个权重。如果页面里有多个 引入不同 CSS 文件，又或者内联 写在了外部样式之后，就可能“覆盖掉”你想要的效果。
- 在开发者工具的 Elements 面板里选中目标元素，右侧 Styles 面板会列出所有匹配的规则，并标出哪条被划掉（
strikethrough），点开就能看到它被谁覆盖了 - 注意
!important的滥用：如果某个样式用了!important，而你的外部 CSS 没用，即使选择器更具体也可能输 - 检查是否有
或误写成stylesheet，导致资源重复或错乱
排查 MIME 类型和服务器响应头问题
有些 Web 服务器（尤其是本地开发时用的 Python http.server、某些静态托管服务）默认不给 .css 文件返回正确的 Content-Type: text/css。浏览器收到非 text/css 的响应，会直接拒绝解析样式表，控制台报错类似：The stylesheet ... was not loaded because its MIME type, "text/plain", is not "text/css".
- 在 Network 面板里点击 CSS 文件，看 Response Headers 中的
Content-Type是否为text/css - 本地调试可用
python3 -m http.server --bind 127.0.0.1:8000（Python 3.7+），它默认支持正确 MIME；老版本可换用live-server或http-server - Nginx / Apache 需确保配置了
types { text/css css; }类似的映射
检查是否在 Shadow DOM 或 iframe 里漏掉了样式作用域
如果目标元素在 里，或组件用了 Shadow DOM（比如 Web Components、某些 UI 库的封装节点），那么外部引入的全局 CSS 默认不会穿透进去。
立即学习“前端免费学习笔记（深入）”；
-
里的内容完全独立，需在page.html里单独样式 - Shadow DOM 中，除非显式使用
:host、::slotted或inherit等机制，否则外部样式不生效 - 部分框架（如 Vue 的
scoped、Svelte 的module）也会隔离样式，此时外部 CSS 需配合deep或:global()才能影响组件内部
