HTML中style属性没反应，大概率是被更高优先级CSS覆盖，或存在拼写错误、标签不匹配、作用域限制、路径错误、加载顺序问题及父级样式干扰。
HTML 里写 style 属性为什么没反应？
直接在标签里用 style="color: red;" 却没变色，大概率是被更高优先级的 CSS 覆盖了。浏览器渲染时，内联样式（style 属性）本应优先级最高，但若用了 !important、CSS-in-JS 动态注入、或 Shadow DOM 隔离，它就可能失效。
- 检查是否被
!important的外部规则覆盖：打开 DevTools → Elements 面板 → 看该元素的 computed 样式，找被划掉的属性，点开对应 rule 查看来源 - 确认标签是否真被渲染：用 DevTools 检查该 HTML 是否还在 DOM 中（比如被 JS 删除、条件渲染未触发、或模板语法写错导致没生成）
- 注意大小写和拼写：
backgroud-color（少个 r）、dispay这类笔误不会报错，但样式不生效 - 某些属性对特定标签无效：比如
display: flex写在width对（默认 inline）也不起作用，除非先设display: inline-block或block
用
写在 里却没生效，不是语法错，而是作用域或加载时机问题。
- 确保
在内，且没有被 JS 动态移除（比如某些框架初始化时清空） - 检查选择器是否匹配：写
div.my-class却给元素加了class="my_class"（下划线 vs 连字符），或用了 ID 但写成.header（漏了#） - 留意 CSS 作用域限制：Vue/Svelte 等框架的 scoped style 默认只作用于当前组件；React 中若用
createPortal渲染到 body 外，就管不到那里
引入外部 CSS 文件后样式丢失的常见原因
看似简单，但路径、编码、加载顺序都可能让它“静默失败”。
- 路径错误最常见：用相对路径时，以当前 HTML 文件为基准，不是以 JS 或 CSS 文件为基准；
./css/style.css和css/style.css在不同目录结构下含义不同 - 检查 Network 面板：若
style.css显示 404 或 pending，说明路径或服务器配置有问题；显示 200 但内容为空，可能是文件编码为 UTF-8 BOM 导致解析失败（改用无 BOM 的 UTF-8） - CSS 加载顺序影响覆盖：后引入的 CSS 会覆盖前面同名规则；若你自己的
style.css在 Bootstrap 之后引入，又没提高特异性，就容易被盖掉 - 避免在
底部写：虽然能加载，但可能导致 FOUC（Flash of Unstyled Content），且部分旧浏览器不支持
DevTools 里能看到样式但页面没变？重点查继承与计算值
Computed 标签页显示某属性值是 16px，但文字看起来小得多——这说明你看到的是“最终计算结果”，不是“你写的那行代码”。真正起作用的可能是继承值、浏览器默认样式，或父级 transform 缩放影响。
立即学习“前端免费学习笔记（深入）”；
- 点击 Computed 面板右上角的“filter”图标，输入属性名（如
font-size），看哪条规则实际生效，以及它的 origin（user agent / author / inline） - 检查父元素是否有
font-size: 0.8em或transform: scale(0.9)，它们会影响子元素的视觉表现，但不改变 computed 值本身 - 注意单位换算：写
font-size: 1rem，但根元素的 font-size 被 JS 改成 12px，那 1rem 就真是 12px，不是你预期的 16px - 某些属性无法继承（如
margin），别指望父级设了就能影响子级；而color可继承，但若子级显式设了color: initial，就会重置为浏览器默认色
