最常见原因是选择器未匹配目标元素，需用开发者工具检查Styles面板中规则是否出现、确认class名与HTML一致、区分后代选择器与多类选择器、注意ID/class/标签名符号、排查动态元素是否存在、优先级覆盖、继承属性限制、display/visibility隐藏及overflow裁剪等问题。
选择器没匹配到目标元素
CSS 属性写对了但没生效，最常见原因是选择器根本没选中你想要的元素。浏览器不会报错，只是默默忽略——它压根没找到那个节点。
检查方法：打开开发者工具（F12），右键目标元素 →「检查」，在 Styles 面板里看你的规则是否出现在列表中。如果完全没出现，说明选择器失效。
- 确认元素实际 class 名和 HTML 中是否一致，比如
class="btn-primary"写成class="btn primary"就会让.btn-primary失效 - 注意空格含义：
.container .header是后代选择器，.container.header是同时具有两个 class 的元素，二者完全不同 - ID 选择器带
#，class 带.，标签名不加任何符号——写成div.class和.div.class效果天差地别 - 动态插入的元素（如 JS 渲染后）可能还没挂载完成，Styles 面板里搜不到你的规则，先确认元素是否存在 DOM 中
样式被更高优先级规则覆盖
即使选择器匹配成功，也可能被其他 CSS 规则“盖掉”。浏览器按优先级（specificity）决定谁生效，不是按书写顺序或文件位置。
例如 #nav .item:hover 会胜过 .menu-item:hover，哪怕后者写在后面、文件更靠后。
立即学习“前端免费学习笔记（深入）”；
- 用开发者工具看 Styles 面板：被划掉的属性就是被覆盖了，点开右侧的「Computed」可查最终生效值来源
- 避免滥用
!important，它会破坏可维护性；优先改选择器提高 specificity，比如从.btn改成.header .btn - 内联样式（
style="color: red"）优先级高于所有外部 CSS，JS 动态设置的 style 也属此类
继承属性不作用于当前元素
不是所有 CSS 属性都可继承。color、font-size、line-height 可以，但 margin、padding、width、display 等默认不继承。写对了也没用。
比如给父元素设了 margin: 20px，子元素不会因此获得外边距——这是常见误解。
- 查 MDN 文档确认某属性是否 inheritable，搜索 “CSS
property-nameinheritance” - 想让子元素“看起来像”继承了某个非继承属性，得显式写出来，或用 CSS 自定义属性（
--gap: 12px）配合var(--gap)传递 - 用开发者工具的 Computed 面板直接看该属性值是 “inherited from xxx” 还是 “computed value”，一目了然
display 或 visibility 隐藏了渲染效果
有些属性看似“没效果”，其实是元素本身没正常参与布局。比如设置了 color: red，但元素被 display: none 或 visibility: hidden 挡住了。
-
display: none会彻底移出渲染树，此时连盒模型、事件、甚至getBoundingClientRect()都不可见 -
visibility: hidden保留空间但隐藏内容，此时color等视觉属性依然生效，只是你看不见 - 父元素设了
overflow: hidden且子元素超出边界，也可能导致部分样式“消失”——实际是被裁剪了 - 检查元素是否被 transform 缩放为 0、opacity 设为 0，或 z-index 被压在底层
