CSS的相邻兄弟选择器是CSS选择器中用于定位和样式化具有相同父元素的相邻元素的工具。它的主要作用是选取紧接在另一个元素后的元素，且这两个元素必须拥有同一个父级元素。相邻兄弟选择器的用法相对简单，只需要理解几个关键点就可以轻松运用。
我们来明确什么是相邻兄弟元素。在HTML文档中，具有相同父元素的元素按顺序排列，位于同一个父元素下的这些元素被称为兄弟元素。如果两个兄弟元素之间没有其他兄弟元素，那么它们就是相邻的。例如，在以下HTML结构中，`<li>item2</li>` 和 `<li>item3</li>` 是相邻兄弟元素，因为它们之间没有其他`<li>`元素，而`<li>item1</li>` 和 `<li>item2</li>` 虽然是兄弟元素，但不是相邻的。
```html
<ul>
<li>item1</li>
<li>item2</li>
<li>item3</li>
</ul>
```
为了在CSS中选中相邻兄弟元素，并对其应用样式规则，我们使用加号“+”作为连接符。在CSS选择器中，将需要选择的元素和它的相邻兄弟元素写在一起，并用加号分隔，就可以精确地定位到紧接在特定元素后面的那一个兄弟元素。例如，在下面的CSS代码中，选择器`li+li`的含义就是选择所有`<li>`元素之后紧跟的`<li>`元素，并将这些被选中的元素的字体大小设置为50像素。
```css
li+li {
font-size: 50px;
}
```
当应用了上述CSS规则后，`<li>item2</li>` 和 `<li>item3</li>` 中的`<li>`元素的字体大小都会变为50像素，但`<li>item1</li>` 不会被影响，因为它没有紧接着的`<li>`兄弟元素。
此外，CSS相邻兄弟选择器不仅限于`<li>`元素。任何有相同父元素的相邻HTML元素都可以使用这个选择器，比如段落`<p>`标签。以下是使用相邻兄弟选择器对段落元素进行样式的例子：
```html
<html>
<head>
<style type="text/css">
#p1+p {
margin-top: 50px;
}
</style>
</head>
<body>
<p id='p1'>This is paragraph1.</p>
<p id='p2'>This is paragraph2.</p>
<p id='p3'>This is paragraph3.</p>
<p id='p4'>This is paragraph4.</p>
</body>
</html>
```
在上述HTML文档中，CSS规则`#p1+p`表示选择`id`为`p1`的段落后紧接着的段落（即`id`为`p2`的段落），并给它添加了上边距为50像素的样式。因此，`<p id='p2'>This is paragraph2.</p>` 的上边距会变大，而其他段落不受影响。
需要注意的是，相邻兄弟选择器只能选择紧接着的那一个兄弟元素，如果后面还有其他同级元素，它们不会被这个选择器选中。例如，只有`<li>`元素后面紧跟的那一个`<li>`元素会被`li+li`这个选择器选中，更后面的`<li>`元素则不会受到影响。这一点在实际应用中需要特别注意，以确保正确选择需要的元素。
- 1
- 2
前往页