html样式未生效需检查css优先级、!important、外部样式表加载顺序、shadow dom、all重置规则、框架scoped样式、class名错误、js动态操作dom方式、网络请求状态、flex/grid子项尺寸控制、box-sizing、rem/em计算链、字体颜色兼容性及渲染层叠上下文。
HTML 样式没生效，检查 style 属性是否被覆盖
浏览器渲染时，CSS 优先级决定谁生效。直接写在标签上的 style 属性（内联样式）本该最高，但若用了 !important、或加载了更晚的外部样式表、或启用了 Shadow DOM，它就可能被悄悄干掉。
- 打开开发者工具，选中元素，在 Computed 面板看
color、font-size等实际值，点开右侧来源，确认哪条规则赢了 - 检查是否有
all: unset或all: revert这类全局重置规则影响了继承链 - 注意框架（如 Vue/React）的 scoped style 或 CSS-in-JS 可能自动加属性选择器前缀，导致你写的
style被隔离或忽略
class 名写错或未加载 CSS 文件，className 和 class 混用
JS 动态操作 DOM 时，用 element.className = 'btn active' 是对的；但 React 中必须写 className，Vue 模板里用 class——写反了不会报错，但样式就是不出现。
- 原生 JS 改 class：用
element.classList.add('active')，别手写空格拼接，避免重复或漏空格 - React JSX 中写
<div classname="header">，写成 <code>class会被 React 忽略，且控制台无提示 - 检查网络面板，确认
styles.css返回状态是 200，不是 404 或 MIME 类型错误（比如服务器返回text/plain而非text/css） - Flex 子项要固定宽，加上
flex: 0 0 200px（即关闭伸缩），或单独设flex-shrink: 0 - Grid 项若想撑满列轨道，用
width: 100%不可靠，改用justify-self: stretch或确保父 Grid 有明确列定义（如grid-template-columns: 1fr 200px） - 注意
box-sizing：默认content-box下，padding会撑出额外宽度，导致换行或溢出——统一加* { box-sizing: border-box }能省不少调试时间 - 避免在 CSS 里写死
html { font-size: 16px }后又用 JS 覆盖——要么全 CSS（配合clamp()或媒体查询），要么全 JS 控制，别混用 - 调试时在控制台输
getComputedStyle(document.documentElement).fontSize，看当前根字号是不是你预期的值 - 颜色用
hsl()或oklch()替代rgb()可提升深色模式兼容性，但注意 Safari 16.4+ 才支持oklch()，旧版本会直接失效
Flex/Grid 布局子项不响应 width 或 height
Flex 容器默认让子项收缩（flex-shrink: 1），Grid 项默认不占满轨道，这时硬写 width: 200px 可能被无视，尤其当内容短、父容器没设宽高时。
字体/颜色在不同设备上显示异常，rem 和 em 计算链断裂
rem 依赖根元素 font-size，但很多项目用 JS 动态改 document.documentElement.style.fontSize 做适配，如果 JS 执行晚于 CSS 加载，初始渲染就会失准；em 则层层继承，父级一变全乱。
立即学习“前端免费学习笔记（深入）”；
样式格式化问题真正卡住人的，往往不是语法错，而是某一层计算被静默截断——比如父容器 overflow: hidden 裁掉了你调好的阴影，或者 transform 创建了新层叠上下文，让 z-index 突然失效。遇到“明明写了却看不见”，先查渲染树，再查层叠上下文，比反复改 CSS 更快。
