相邻兄弟选择器

如果需要选择紧接在另一个元素后的元素，而且二者有相同的父元素，可以使用相邻兄弟选择器。

如果要增加紧接在 h1 元素后出现的段落的上边距，可以这样写：

h1 + p {margin-top:50px;}

这个选择器读作：“选择紧接在 h1 元素后出现的段落，h1 和 p 元素拥有共同的父元素”。

相邻兄弟选择器使用了加号（+），即相邻兄弟结合符

例子：

<div>
  <ul>
    <li>List item 1</li>
    <li>List item 2</li>
    <li>List item 3</li>
  </ul>
  <ol>
    <li>List item 1</li>
    <li>List item 2</li>
    <li>List item 3</li>
  </ol>
</div>

li + li {font-weight:bold;}

上面这个选择器只会把列表中的第二个和第三个列表项变为粗体。第一个列表项不受影响。

语法: E~F{ sRules }

表示: 选择E元素后面的所有兄弟元素F。

除了IE6不支持, 大部分浏览器都支持。

例子：

p~p{color:#f00;}

上面这个选择器只会把p后面的所有p都用红色标记，而第一个p不影响。

习题一