类别：CSS / 日期：2020-01-01 / 浏览：193 / 评论：0
相邻兄弟挑选器（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 元素中包括两个列表：一个无序列表，一个有序列表，每一个列表都包括三个列表项。这两个列表是相邻兄弟，列表项自身也是相邻兄弟。
不过，第一个列表中的列表项与第二个列表中的列表项不是相邻兄弟，由于这两组列表项不属于同一父元素（最多只能算堂兄弟）。
请记着，用一个连系符只能挑选两个相邻兄弟中的第二个元素。请看下面的挑选器：
li + li {font-weight:bold;}
上面这个挑选器只会把列表中的第二个和第三个列表项变成粗体。第一个列表项不受影响。
以上就是CSS的相邻兄弟挑选器什么时候用的细致内容，更多请关注ki4网别的相干文章！
版权声明 : 本文未使用任何知识共享协议授权，您可以任何形式自由转载或使用。
