首要确认CSS是否被浏览器加载和识别：先查Network面板状态码是否200，排除404/403/blocked；再用Elements面板验证选择器匹配、优先级覆盖、大小写错误、媒体查询、display隐藏、CSS变量拼写及语法缺失等问题。
打开开发者工具直接看 Network 和 Elements
样式没反应，第一反应不是改代码，而是确认浏览器到底有没有拿到你的 CSS 文件。很多所谓“CSS 写错了”，其实是 <link> 根本没发请求——比如 rel="sytlesheet"（多 y 少 t）这种拼写错误，浏览器直接忽略，不报错、不加载、不渲染。
操作步骤很直接：
- 按
F12打开开发者工具 → 切到Network面板 → 过滤css→ 刷新页面 - 如果目标文件（如
style.css）完全没出现，或状态码是404/blocked，问题就在加载链路上 - 再切到
Elements面板，点开<head>里的<link>，确认href路径是否带错斜杠（./css/style.cssvs/css/style.css），以及rel值是不是严格等于stylesheet
在 Styles 面板里盯住被划掉的规则
Network 显示 200 只说明文件加载成功，不代表样式能生效。真正起作用的是层叠逻辑——浏览器按选择器权重决定谁赢，而不是“后写的一定覆盖前写的”。
选中目标元素后，在右侧 Styles 面板里，所有被划掉（strikethrough）的样式就是被覆盖的。点开它，能看到右边标出的 specificity 值（例如 0,1,0,1）和覆盖来源（比如来自 inline style 或某个更重的选择器）。
立即学习“前端免费学习笔记（深入）”；
常见干扰项：
-
style="color: blue;"这种内联样式优先级永远高于 class -
#header .nav a（0,1,1,1）比.btn（0,1,0,0）高一级，轻松干掉你写的按钮颜色 -
all: unset或all: revert这类全局重置会切断继承链，让color、font-size看似“失效”
检查 HTML 结构是否合法、class 是否匹配
CSS 不是魔法，它只对真实存在于 DOM 中、且被正确标记的元素起作用。结构错一点，选择器就全白搭。
典型翻车现场：
-
<div class="btn-primary">对应的 CSS 必须是.btn-primary，写成.btn_primary（下划线）或.btnPrimary（驼峰）都不匹配 - 多个 class 用了中文空格或全角逗号：
class="header,footer"→ 浏览器只认header，后面整个被丢弃 -
<div class="box">但 CSS 写了box { }（漏了点号）→ 浏览器当它是标签选择器，去找<box>这个根本不存在的元素 - HTML 没闭合
<head>，或者把<div>写在</head>和<body>之间 → 浏览器自动纠错，但样式作用域可能丢失
注意 Flex/Grid 容器声明缺失和变量拼写错误
现代布局和 CSS 变量是高频失效区，问题往往藏得深，但表现很“诡异”：比如子元素死活设不了宽度，或者边框颜色怎么都不变。
Flex 和 Grid 的行为高度依赖容器显式声明：
- 只写
flex-direction: column没用，必须先有display: flex；否则子项的flex属性全被忽略 - Grid 子项写
width: 100%常常无效，因为默认不占满轨道；得靠justify-self: stretch或父容器定义grid-template-columns - CSS 变量名大小写和拼写必须完全一致：
--alllports（三个 l）定义了，引用时写var(--allports)（两个 l）→ 返回invalid value，依赖它的border直接失效
这类问题不会报错，也不在 Network 或 Styles 面板里明说，只能靠你盯着变量名一个字母一个字母地核对。
