css相邻选择器使用的方法介绍

<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;}

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