相邻兄弟选择器

相邻兄弟选择器（Adjacent Sibling Selector）是CSS中的一种组合选择器，它通过元素之间的相邻关系来选择元素。相邻兄弟选择器只选择紧接在指定元素后面的一个兄弟元素。

基本语法

相邻兄弟选择器的语法是使用+符号分隔两个选择器：

prev + next {
  property: value;
}

其中，prev是前面的元素选择器，next是紧接在后面的兄弟元素选择器。

工作原理

相邻兄弟选择器会匹配所有紧接在prev元素后面的next元素，且这两个元素必须有相同的父元素。也就是说，只有当元素B紧接在元素A后面，并且它们有相同的父元素时，相邻兄弟选择器A + B才会匹配元素B。

使用示例

示例1：选择紧接在h1后面的p元素

<h1>标题</h1>
<p>这是紧接在h1后面的段落</p>
<p>这是另一个段落</p>

h1 + p {
  color: blue;
  font-size: 18px;
  font-weight: bold;
}

这段CSS会选择紧接在h1元素后面的p元素。在上面的HTML中，第一个p元素会被选中，而第二个p元素不会被选中。

示例2：为表单元素设置样式

<form>
  <label for="username">用户名：</label>
  <input type="text" id="username">
  <label for="password">密码：</label>
  <input type="password" id="password">
</form>

label + input {
  margin-left: 10px;
  margin-bottom: 15px;
  padding: 8px;
  border: 1px solid #ccc;
}

这段CSS会选择紧接在label元素后面的input元素，并为它们设置左边距、下边距、内边距和边框。

示例3：创建分隔线效果

<div class="item">项目1</div>
<div class="item">项目2</div>
<div class="item">项目3</div>
<div class="item">项目4</div>

.item + .item {
  border-top: 1px solid #ccc;
  padding-top: 10px;
  margin-top: 10px;
}

这段CSS会选择紧接在.item元素后面的.item元素，并为它们设置上边框、上内边距和上外边距。在上面的HTML中，第二个、第三个和第四个div元素会被选中，从而在项目之间创建分隔线效果。

特点

1. 相邻关系：只选择紧接在前面元素后面的一个兄弟元素
2. 相同父元素：两个元素必须有相同的父元素
3. 中优先级：在CSS选择器优先级中，相邻兄弟选择器的优先级与类选择器相同
4. 灵活组合：可以与其他选择器结合使用

注意事项

1. 顺序重要：相邻兄弟选择器的顺序是固定的，prev + next不能写成next + prev
2. 紧接关系：元素必须是紧接的，中间不能有其他元素
3. 相同父元素：两个元素必须有相同的父元素
4. 浏览器兼容性：相邻兄弟选择器在IE6及以下版本的浏览器中不支持

浏览器兼容性

相关资源

• MDN Web Docs - 相邻兄弟选择器
• W3Schools - CSS 相邻兄弟选择器

学习建议

相邻兄弟选择器是CSS中有用的组合选择器之一，它可以用于创建各种视觉效果，如分隔线、表单元素间距等。建议初学者理解相邻兄弟选择器的工作原理，并在需要选择紧接在特定元素后面的兄弟元素时使用它。