相邻兄弟选择器怎么写？+ 是唯一合法符号
相邻兄弟选择器只有一种写法：h1 + p，意思是“紧接在 h1 后面的、同级的、第一个 p 元素”。它不匹配隔了其他元素的 p，也不匹配嵌套在 h1 里的内容。
常见错误现象：
- 写了
h1 ~ p却以为是相邻——这是通用兄弟选择器，会选中所有后面的p，不是“紧挨着”的那个 - 写了
h1 > p或h1 p——这是后代或子元素选择器，完全不是兄弟关系 - 试图用
h1 + .intro匹配多个类名——没问题，但前提是这个元素必须是h1的下一个同级元素，且类名含intro
+ 前后元素必须是同级且顺序严格
DOM 结构决定它能不能生效。哪怕中间有个空格文本节点、注释节点，或者一个 span，+ 就断了。
使用场景举例：给标题后的第一段加缩进、隐藏表单中某输入框后的提示文字、控制导航项激活态后的下划线样式。
立即学习“前端免费学习笔记（深入）”；
实操建议：
- 用浏览器开发者工具的“Elements”面板确认两个元素是否真正在 DOM 树中相邻（右键 → “Edit as HTML” 可临时删掉干扰节点验证）
- 避免依赖不可见节点：服务端渲染或 JS 动态插入时，注意不要意外插入空文本节点
- 如果结构不确定，优先考虑用 class 控制，而不是强依赖 DOM 顺序
为什么有时候 div + span 不生效？检查这三点
这不是选择器写错了，大概率是结构或渲染时机问题。
常见原因：
-
span不在div同一层：比如被包在div > div > span里，那就不是兄弟，是后代 -
span在div前面：顺序反了，+只向前找，不向后找 - CSS 加载早于 DOM 渲染完成：JS 动态插入元素后，样式已计算完毕，新节点没被重新匹配——此时需手动触发重绘（如加个 class 再移除），或改用 JS 控制
性能影响很小，但兼容性要注意：+ 在 IE7+ 都支持，但老版本 Safari 对伪元素和某些动态插入场景处理不稳定。
想选“后面所有兄弟”？换用 ~，但别混淆用途
~ 是通用兄弟选择器，比如 h2 ~ p 会选中 h2 后面所有同级 p，不管中间隔了多少别的标签。
关键区别：
-
+：只认“下一个”，精确、轻量、可控 -
~：认“后面全部”，灵活但容易误伤，调试时更难定位 - 两者都不能跨父容器，也不能向上选父级或祖先
真实项目里，多数时候该用 + 的地方，是因为逻辑上就只该影响“紧接着的那个”。一旦发现要靠 ~ 才能达成效果，往往说明结构设计或语义组织可以再理一理。
复杂点在于：CSS 本身没有“前一个兄弟”选择器，也没有“第 n 个兄弟”原生语法。这些都得靠 JS 或重构 HTML 来兜底。
