<span style="text-indent: 2em; font-family: 'Microsoft YaHei', 宋体, Arial, Simhei; background-color: rgb(255, 255, 255);">如果需要选择紧接在另一个元素后的元素,而且二者有相同的父元素,可以使用相邻兄弟选择器(Adjacent sibling selector)。</span>
例如,如果要增加紧接在 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>
<pre name="code" class="html">li + li {font-weight:bold;}
注意:上面这个选择器只会把列表中的第二个和第三个列表项变成粗体。第一个列表项不受影响。