class名必须严格区分大小写且逐字符匹配，dom中需实时存在、css文件加载成功、优先级未被覆盖，否则样式不生效。
class 名拼写或大小写是否完全一致
HTML 中的 class 属性值和 CSS 选择器中的类名必须逐字符匹配，包括大小写。浏览器对 class 名区分大小写，哪怕只差一个字母或大小写错误，样式就不会生效。
-
class="header"对应的 CSS 必须是.header，写成.Header或.heder都无效 - 如果 HTML 是
class="nav-item active"，而你写了.navitem（少短横）或.active-item（顺序反了），也不会命中 - 检查是否误把
class写成了className（React JSX 中合法，但原生 HTML 只认class）
元素是否真的拥有该 class（运行时 DOM 状态）
静态 HTML 看起来有 class，不代表最终渲染的元素一定还带着它——JavaScript 可能动态移除了、替换了，或条件渲染根本没挂上。
- 用浏览器开发者工具（F12）选中元素，在 Elements 面板里直接看该标签的
class属性值，不是看源码，是看实时 DOM - 如果用了框架（如 Vue/React），class 可能由表达式生成，比如
:class="{ 'disabled': isPending }"，此时要确认isPending是否为true - 检查是否在 JS 中调用了
element.classList.remove('my-class')却没留意
CSS 选择器优先级是否被覆盖
即使 class 存在且拼写正确，也可能因为优先级低，被其他更具体的规则覆盖。
- 打开 DevTools 的 Styles 面板，找到你的
.my-class声明，看它是否被划掉（strikethrough）；如果是，说明有更高优先级的同名属性覆盖了它 - 例如：
#nav .menu-item比.menu-item优先级高；div.my-class和.my-class优先级相同，后声明者生效 - 避免滥用
!important，先理清层叠逻辑；可用Specificity Calculator工具辅助判断
样式表是否加载成功或作用域受限
class 没问题、DOM 也存在，但样式仍不生效，可能是样式文件根本没加载，或被限制在局部作用域内。
立即学习“前端免费学习笔记（深入）”；
- 检查 Network 面板，确认 CSS 文件状态码是
200，不是404或500 - 如果是 Vue 的
<style scoped></style>或 React 的 CSS Modules，class 会被自动重命名（如.button_abc123），原始.button选择器不会匹配 - Shadow DOM 场景下，外部 CSS 默认无法穿透到内部，需用
::slotted()或:host等特殊伪类
.my-button {
background-color: blue;
color: white;
}
这行样式只有在元素真实含有 class="my-button"、CSS 成功加载、且未被更高优先级规则屏蔽时，才会起作用。最常被忽略的是：你以为它在 DOM 上，其实 JS 刚把它删了；或者你改了 CSS，却忘了热更新没触发，浏览器还在用旧缓存。
