加了样式却没反应的主因是路径错误、加载顺序不当、浏览器缓存、选择器不匹配或编码问题，而非CSS语法错误。
直接加 <style></style> 或 <link> 就能生效，但顺序、作用域和加载时机决定样式到底起不起作用。
内联样式 vs <style></style> 标签 vs 外部 CSS 文件
三者优先级相同（都是“普通样式”），但加载方式和维护成本差别很大：
- 内联样式（
style="..."）优先级最高，但无法复用、难调试，只适合临时覆盖或 JS 动态控制 -
<style></style>写在里，作用于当前页面，适合小项目或页面专属样式 - 外部 CSS（
<link rel="stylesheet" href="xxx.css">）最常用，支持缓存、复用、分离关注点；注意路径必须正确，相对路径以 HTML 文件位置为基准
<link> 的 rel 和 href 必须写对
常见错误是把 rel 写成 stylesheet 以外的值（比如 css），或者 href 路径 404 —— 浏览器不会报错，只会静默失败。
-
rel必须是"stylesheet"，少一个字母都不行 -
href推荐用相对路径，比如"./css/main.css"；如果用绝对路径，开头带/表示从网站根目录开始找 - 检查是否真的加载成功：打开浏览器开发者工具 → Network 标签页 → 刷新页面 → 找到你的 CSS 文件，状态码不是
200就说明路径错了
CSS 加载顺序影响最终效果
样式表按 HTML 中出现的顺序依次解析，后写的规则会覆盖前面同选择器的声明。这点在混用多个 <link> 和 <style></style> 时特别关键。
立即学习“前端免费学习笔记（深入）”；
- 通用重置（如
normalize.css）应放在最前 - 框架样式（如 Bootstrap）放中间
- 你自己的
<style></style>或自定义 CSS 放最后，否则容易被覆盖 - 避免在
底部放<link>：会阻塞渲染，且部分浏览器可能不应用
为什么加了样式却没反应？几个高频盲区
不是代码没写，而是这些地方卡住了：
- CSS 选择器写错了：比如写了
.btn，但 HTML 里是class="button"；或者用了#header，但元素没有id="header" - 浏览器缓存了旧 CSS：强制刷新（
Ctrl+Shift+R或Cmd+Shift+R），或在 DevTools 的 Network 里勾选Disable cache - CSS 文件编码不是 UTF-8：中文注释或字体名乱码会导致整段样式失效；用编辑器确认保存为 UTF-8 无 BOM
- 样式被更高优先级规则覆盖：用 DevTools 点开元素，看右边 Styles 面板里哪些属性被划掉，点旁边的小箭头溯源
真正麻烦的从来不是“怎么加”，而是“加了为什么没变”——多数时候问题不在 CSS 语法，而在路径、顺序、缓存或选择器匹配不上。
