rel="stylesheet"拼写错误是最隐蔽高频问题，浏览器严格匹配该值，错写为sytlesheet等会导致标签被忽略、不发请求；需用devtools elements和network面板验证拼写与200状态，并检查路径、content-type、选择器匹配及作用域隔离。
rel="stylesheet" 拼写错误导致 CSS 完全不加载
这是最隐蔽却高频致命的问题：浏览器只认 stylesheet（两个 t，无 y），写成 sytlesheet、styleSheet 或 css 都会被直接忽略——不发请求、不报错、也不渲染任何样式。
- 打开浏览器 DevTools → Network → 切换 Filter 为 CSS，刷新页面；若你的 CSS 文件完全没出现在列表里，90% 是这个原因
- 右键网页 → “查看页面源代码”，搜索
<link>，肉眼核对 <code>rel值是否为stylesheet - VS Code 中输入
<link rel=""> 会自动补全正确拼写，善用这个提示
CSS 文件路径 404 或解析错位
即使 rel 正确，路径一错，CSS 就卡在加载环节。PHP 页面的 URL 路径 ≠ 文件物理位置，相对路径极易失效。
-
href="css/style.css"表示从当前 HTML 文件所在目录找css/子目录；若 PHP 文件在/admin/list.php，浏览器实际请求的是/admin/css/style.css - 推荐统一用根相对路径：
href="/css/style.css"（要求文件真正在服务器根目录下的/css/） - 或显式相对路径：
href="./style.css"（假设 CSS 与 PHP 文件同级） - 绝对不要在 PHP 中用
include 'style.css'—— 这会把 CSS 当 HTML 输出，浏览器无法识别
选择器未匹配到真实 DOM 结构
CSS 加载成功但样式没变？说明规则存在，只是没命中目标元素。常见于类名大小写、空格语义、嵌套层级或 JS 动态插入节点。
- 右键目标元素 → “检查”，在 Elements 面板逐字核对
class名：大小写敏感（.Card≠.card），空格表示后代（.container .btn），点连写表示多类共存（.container.btn） - JS 创建的元素（如
document.createElement('div').className = 'tip'），其 class 必须与现有 CSS 规则结构完全一致 - 伪类（
:hover）和伪元素（::before）需满足触发条件才能在 Computed 面板看到效果 - Shadow DOM 内部需用
::slotted(.item)或:host .item，普通.item无效
优先级覆盖与缓存干扰
样式被覆盖不是 bug，是层叠机制生效；而缓存会让旧 CSS 固化问题，掩盖真实修改效果。
- Bootstrap/Tailwind 等框架 CSS 必须放在自定义 CSS 之前 引入，否则会被后加载的规则覆盖
- 强制刷新（
Ctrl+Shift+R/Cmd+Shift+R）清内存缓存；DevTools Network 面板勾选Disable cache持续验证 - 无痕模式打开页面，可绕过常规缓存干扰
- 使用
getComputedStyle(document.querySelector('.your-class')).color在 Console 直接读取最终计算值，比看 Styles 面板更可靠
rel 拼错后 Network 面板里根本看不到文件，或者路径错导致 404 却误以为是选择器问题。先确认文件抵达浏览器，再查匹配逻辑，最后看优先级，顺序不能颠。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
