HTML样式不生效主因是加载链路或优先级问题：先查link路径是否存在、style标签位置是否正确、是否有更高优先级规则覆盖；再验class名大小写与空格；注意display:none与visibility:hidden差异；移动端:hover不触发属正常设计。
样式写对了但页面没变，先查这三件事
HTML 样式不生效，90% 的情况不是 CSS 写错了，而是加载链路断了。优先确认：
- <link> 标签的 href 路径是否真实存在（浏览器开发者工具 Network 里看 404）
- <style></style> 是否被错误放在 外或注释里
- 是否有更高优先级的规则覆盖了你的样式（用开发者工具 Elements 面板点开对应元素，看右边 Styles 面板中哪些属性被划掉、被标记为 inline 或 !important）
class 名拼错、大小写不一致、空格多一个
CSS 类名严格区分大小写，且不自动 trim 空格。常见失效场景：
- HTML 写成 <div class="btn-primary">，CSS 却定义 <code>.btn_primary { }（下划线 vs 连字符）
- Vue/React 模板中动态绑定 class：:class="['btn', isActive ? 'btn-active' : '']"，漏了引号变成 isActive ? btn-active : '' → 直接报 JS 错误，class 不渲染
- 多个 class 间写了中文空格或全角空格：class="header footer"（注意中间是全角空格）→ 浏览器只认第一个 header，后面整个被忽略
display: none 和 visibility: hidden 的区别不只是“看不见”
两者都让元素不可见，但影响完全不同：
- display: none：元素彻底从渲染树移除，不占布局空间，子元素也无法通过 JS 访问 offsetHeight 等属性
- visibility: hidden：元素仍占位，只是透明；子元素默认继承该状态，但可被显式设为 visibility: visible 而单独显示
- 常见误用：用 visibility: hidden 做“隐藏弹窗”，结果滚动条还在、tab 键仍能聚焦到里面按钮 → 应该用 display: none 或配合 aria-hidden
伪类 :hover 在移动端不触发？不是 bug 是设计
移动设备没有“悬停”概念，:hover 在 iOS Safari、Android Chrome 中默认仅在桌面模拟模式（DevTools 切换 device 后启用 hover）下生效，真机几乎不触发。
替代方案：
- 用 :active 响应点击瞬间（注意需加 touchstart 事件防止 300ms 延迟）
- 用 JS 切换 class：element.addEventListener('click', () => el.classList.toggle('is-hovered'))
- 若必须保留 hover 效果（如 PC+Mobile 同一套 CSS），可加媒体查询兜底：@media (hover: hover) { .btn:hover { color: red; } }
最常被忽略的是层叠上下文（stacking context）和 CSS 选择器权重计算——比如父容器用了 transform 或 opacity ，会强制创建新层叠上下文，导致子元素的 <code>z-index 失效；又比如 #header .nav a 权重是 111，而你写的 .nav-link 只有 10，再怎么调顺序也盖不过去。
