CSS中h2>span样式未生效主因是结构不匹配、权重不足或被覆盖；需确认span是否为h2直接子元素，改用后代选择器或加类名提升可控性。
如果 CSS 中给标题（如 h1、h2）下的 span 写的样式没生效，大概率是选择器权重不够、写法有误，或 HTML 结构不匹配。用子代选择器（>）确实能更精准控制，但得用对地方。
确认 HTML 结构是否匹配子代选择器
子代选择器 h2 > span 只会选中**直接嵌套在 h2 里的 span**，不包括嵌套在其他标签内的 span。
比如下面这段 HTML：
标题文字副标
✅ 匹配副标
❌ 不匹配（span 不是 h2 的直接子元素）
如果结构是后者，就得改用后代选择器 h2 span，或者调整 HTML。
立即学习“前端免费学习笔记（深入）”；
检查 CSS 优先级和覆盖问题
即使选择器写对了，也可能被其他更重的样式覆盖。常见原因：
- 内联样式（
style="color: red;"）优先级高于外部 CSS - 用了
!important的其他规则压过了你的样式 - 更具体的选择器（如
.header h2 > span）比你写的h2 > span权重高
建议打开浏览器开发者工具（F12），选中目标 span，看“Computed”面板里实际生效的样式来自哪条规则，再针对性调整。
确保 span 没有被其他样式重置
有些 CSS 框架（如 Normalize.css 或重置库）可能设置了全局 span 样式，或继承了父级的 color、font-weight 等。可尝试加一条显式声明来验证：
h2 > span {
color: #ff6b35 !important;
font-weight: bold;
background: yellow;
}
如果这时生效了，说明确实是被其他规则覆盖；去掉 !important 后再逐步提升你自己的选择器权重（比如加上类名：h2.title > span）。
补充：推荐更稳妥的写法
单纯依赖 h2 > span 容易因结构变化失效。更实用的做法是：
- 给需要样式的
span加一个语义类名，比如 - 用类选择器写样式：
.subtitle { color: #666; font-size: 0.8em; } - 如需限定上下文，再组合：
h2 .subtitle或h2 > .subtitle
这样既清晰可控，也方便复用和维护。
基本上就这些。子代选择器不是万能钥匙，关键还是结构匹配 + 权重合理 + 排查到位。
