1. 相邻兄弟选择器(Adjacent sibling selector)可选择紧接在另一元素后的元素, 且二者有相同父元素。
2. 选择相邻兄弟
2.1. 如果需要选择紧接在另一个元素后的元素, 而且二者有相同的父元素, 可以使用相邻兄弟选择器(Adjacent sibling selector)。
2.2. 例如, 如果要增加紧接在h1元素后出现的段落的上边距, 可以这样写:
h1 + p {
margin-top: 50px;
}
3. 语法解释
3.1. 相邻兄弟选择器使用了加号(+), 即相邻兄弟结合符(Adjacent sibling combinator)。
3.2. h1 + p这个选择器读作: "选择紧接在h1元素后出现的段落, h1和p元素拥有共同的父元素"。
3.3. 请记住, 用一个结合符只能选择两个相邻兄弟中的第二个元素。请看下面的选择器:
li + li {
font-weight: bold;
}
请看下面这个文档树片段:
<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>
上面这个选择器只会把列表中的第二个和第三个列表项变为粗体。第一个列表项不受影响。
3.4. 例子
3.4.1. 代码
<!DOCTYPE html>
<html>
<head>
<title>CSS相邻兄弟选择器</title>
<meta charset="utf-8" />
<style type="text/css">
li + li {
font-weight: bold;
}
</style>
</head>
<body>
<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>
</body>
</html>
3.4.2. 效果图