class样式未生效的主因是CSS特异性冲突或元素未匹配选择器；检查开发者工具Styles面板中被划掉的样式，按内联>id>类>标签优先级排查，避免滥用!important和误用inherit。
为什么 class 里写的样式没生效？
常见原因是 CSS 特异性（specificity）冲突，或者 HTML 元素没正确匹配到选择器。比如你在 .btn 里写了 color: red，但实际显示还是蓝色，大概率是更具体的规则（如 button.btn:hover 或内联 style="color: blue"）覆盖了它。
检查方法：打开浏览器开发者工具（F12），选中元素，在 Styles 面板里看哪些样式被划掉（strikethrough）——被划掉的就是被覆盖的。
- 优先级顺序：内联
style> ID 选择器 > 类/属性/伪类 > 标签/伪元素 - 同级规则按「后写」覆盖「先写」，但仅限于相同特异性
- 用
!important是临时解法，不是根本方案；滥用会导致维护困难
inherit 不起作用的典型场景
inherit 只对可继承的 CSS 属性有效（如 color、font-family、text-align），对 border、margin、display 这类默认不可继承的属性写 inherit 没效果，浏览器直接忽略。
另外，如果父元素该属性值本身就是 initial 或 unset，子元素 inherit 也会继承那个“空值”。
立即学习“前端免费学习笔记（深入）”；
- 查 MDN 文档确认某属性是否可继承（搜 “CSS property name inheritance”）
- 想强制继承非继承属性？得显式设置，比如父设
margin: 10px，子不能靠margin: inherit拿到，得用 CSS 自定义属性或 JS 计算 - 注意
all: inherit会重置所有属性（包括display、position等），极易破坏布局
HTML 中 class 和 style 同时存在时谁赢？
内联 style 属性永远比外部或内部 class 样式优先级高（除非 class 里用了 !important）。例如：
<div class="box" style="color: green">文字</div>
<style>.box { color: red; }</style>
结果是绿色——因为内联样式特异性更高。
- 避免在 HTML 标签里写
style，尤其动态生成时容易失控 - 要用 JS 动态改样式，优先操作
className或dataset，而不是直接改style - 若必须用内联样式，记得清除逻辑：比如切换主题时，别只加 class，还要删掉旧的
style
父元素 display: none 导致子元素样式“失效”？
这不是样式继承失效，而是整个子树被渲染引擎跳过：当父元素是 display: none，它的所有子元素都不会触发布局、绘制，自然也看不到任何样式效果（哪怕你给子元素单独写了 display: block）。
对比 visibility: hidden：它保留布局空间，子元素样式仍参与计算，只是不可见。
- 调试时注意区分「没渲染」和「渲染了但被覆盖」——前者在 Elements 面板里看不到 computed styles
- 想条件隐藏又保留样式计算？用
opacity: 0+pointer-events: none，或切到visibility - SSR 或 hydrate 场景下，服务端渲染
display: none但客户端 JS 没及时更新，也会造成样式“延迟生效”
inherit 当万能钥匙去套不可继承属性。多看 computed styles，少猜。 
