css设置兄弟元素样式-兄弟选择器

有一种选择器就叫兄弟元素选择器，分为临近兄弟和普通兄弟。

临近兄弟（相邻）：用 ＋ 表示，只匹配该元素后边的第一个同级元素。
普通兄弟：用 ～ 表示，匹配该元素后边的所有同级元素。

1.相邻兄弟元素

<p class="print_pdf"></p>
<span>打印</span>
/* CSS相邻兄弟选择器，控制打印span标签样式 */
p.print_pdf + span { position:relative;top:-4px;}

2.普通兄弟元素

<p class="print_pdf"></p>
<p class="num">123</p>
<span>打印</span>
/* CSS普通兄弟选择器，控制打印span标签样式 */
p.print_pdf ~ span { position:relative;top:-4px;}

注意：

(1)+和~都不会影响元素前面的兄弟节点的样式

(2)+只会影响对应的后面第一个(相邻的)兄弟节点样式；而~则影响对应的后面的所有兄弟节点样式