相邻兄弟选择器

相邻兄弟选择器(Adjacent sibling selector)可选择紧接在另一元素后的元素,且二者有相同父元素。

选择相邻兄弟

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

如果要增加紧接在 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;}

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

CSS3 兄弟选择符(E~F)

语法: E~F{ sRules }

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

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

例子:

p~p{color:#f00;}

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

习题一