rel="stylesheet"拼写必须为两个t且无y，错写为sytlesheet等会导致css完全不加载；需通过network面板确认200状态，并核对路径、选择器匹配、层叠顺序及作用域隔离问题。
检查 rel="stylesheet" 拼写是否正确
这是最隐蔽却高频致命的问题。浏览器对 rel 属性值严格匹配，只认 stylesheet（两个 t，无 y）。写成 sytlesheet、styleSheet 或 css 都会被直接忽略，不发请求、不解析、不报错。
- 打开 DevTools → Network → 刷新页面，确认你的 CSS 文件是否出现在列表中；若完全缺失，先查
rel - 右键 HTML 源码 → “查看页面源代码”，搜索
<link>，肉眼核对拼写 - VS Code 中输入
<link rel=""> 会自动补全为 <code>stylesheet，善用这个提示
验证 CSS 文件是否真实加载成功（200 状态）
200 状态仅说明文件被服务器返回了，不代表它被正确应用；但若连 200 都没有，一切免谈。常见路径陷阱包括：
-
href="/css/style.css"是根路径，要求文件在服务器根目录下的/css/中；若实际在项目子目录，应改用相对路径如href="./css/style.css" - Vite/Webpack 项目中，
@import的路径是相对于当前 CSS 文件，不是 HTML 文件 - CDN 链接请手动粘贴到浏览器地址栏测试能否打开（如
https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css） - Django/Flask 用户：确认
{% static 'css/custom.css' %}对应的文件真实存在，Network 面板看响应体是否为空或 404
确认选择器能真正匹配到目标元素
DevTools 的 Styles 面板显示了你的规则，但元素没变化？大概率是选择器没命中。这不是加载问题，是逻辑断层。
- 右键目标元素 → “检查”，在 Elements 面板逐字核对 class 名：大小写敏感（
.Card≠.card），空格语义不同（.container .btn是后代，.container.btn是同时拥有两个类） - JS 动态插入的节点（如
document.createElement('p').className = 'tip'），CSS 规则必须已存在，且选择器结构匹配实际 DOM 树（例如不能写body > .tip，而实际是<section><p class="tip"></p></section>） - 伪类（
:hover、:focus）和伪元素（::before）需满足对应状态才能在 Computed 中看到效果 - Shadow DOM 内部需用
::slotted(.item)或:host .item，普通.item无效
排查优先级冲突与作用域隔离
样式被覆盖不是 bug，是 CSS 层叠机制的正常表现。关键在于你是否意识到自己处在哪一层。
- Bootstrap/Tailwind 等框架 CSS 必须在自定义 CSS 之前引入；构建工具打包后顺序以 HTML 中
<link>实际顺序为准，不是 import 顺序 -
<style scoped></style>（Vue）或 CSS Modules（React）中的规则默认不作用于全局类（如.btn），局部覆盖必须写在全局 CSS 文件里，并用组合选择器提权（如.my-section .btn） - 避免滥用
!important：它只提升单条声明优先级，无法挽救语法错误或选择器不匹配；Bootstrap 5.3+ 已在部分工具类中使用!important，叠加易导致对冲失效 - ID 选择器（
#nav）虽权重高，但破坏组件化封装，且与现代框架实践冲突，不推荐用于提权
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
