CSS的相邻兄弟选择器什么时候用【css教程】,CSS

相邻兄弟挑选器（Adjacent sibling selector）可挑选紧接在另一元素后的元素，且两者有雷同父元素。

挑选相邻兄弟 ( 引荐进修：CSS教程 )

假如须要挑选紧接在另一个元素后的元素，而且两者有雷同的父元素，能够运用相邻兄弟挑选器（Adjacent sibling selector）。

比方，假如要增添紧接在 h1 元素后涌现的段落的上边距，能够如许写：

<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
h1 + p {margin-top:50px;}
</style>
</head>

<body>
<h1>This is a heading.</h1>
<p>This is paragraph.</p>
<p>This is paragraph.</p>
<p>This is paragraph.</p>
<p>This is paragraph.</p>
<p>This is paragraph.</p>
</body>
</html>

这个挑选器读作：“挑选紧接在 h1 元素后涌现的段落，h1 和 p 元素具有配合的父元素”。

语法诠释：

相邻兄弟挑选器运用了加号（+），即相邻兄弟连系符（Adjacent sibling combinator）。

解释：与子连系符一样，相邻兄弟连系符旁边能够有空白符。

请看下面这个文档树片断：

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

在上面的片断中，div 元素中包括两个列表：一个无序列表，一个有序列表，每一个列表都包括三个列表项。这两个列表是相邻兄弟，列表项自身也是相邻兄弟。

不过，第一个列表中的列表项与第二个列表中的列表项不是相邻兄弟，由于这两组列表项不属于同一父元素（最多只能算堂兄弟）。

请记着，用一个连系符只能挑选两个相邻兄弟中的第二个元素。请看下面的挑选器：