1. 基础知识
什么是兄弟选择器
CSS 兄弟选择器是一种特殊的选择器，它用于选择一个元素的兄弟元素。
在 CSS 中，我们主要使用两种兄弟选择器：相邻兄弟选择器（+）和通用兄弟选择器（~）。
相邻兄弟选择器选取紧接在另一元素后的元素，而通用兄弟选择器则可以选取所有同级的后续兄弟元素。
为何要使用兄弟选择器
使用兄弟选择器可以帮助我们更加灵活地控制元素间的样式关系，尤其是当我们想要根据元素的位置关系来调整样式时。
它可以帮助我们避免添加额外的类或 ID，使得 HTML 结构更加简洁，CSS 样式更加易于维护。
如何使用兄弟选择器
相邻兄弟选择器用法如下：
h2 + p {
color: red;
}
这段代码表示选择紧跟在 h2 元素后的第一个 p 元素，并将其字体颜色设置为红色。
通用兄弟选择器用法如下：
h2 ~ p {
color: green;
}这段代码表示选择所有跟在 h2 元素后的 p 元素，并将它们的字体颜色设置为绿色。
适用场景
兄弟选择器非常适合用在表单布局、列表布局以及任何需要根据内容顺序来调整样式的场景。
比如，你可能希望表单中所有紧跟在输入框后的错误消息都显示为红色
2. 示例演示
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>兄弟选择器示例</title>
<style>
/* 使用相邻兄弟选择器改变紧跟在 h2 后的第一个 p 元素的颜色 */
h2+p {
color: red;
}
/* 使用通用兄弟选择器改变所有跟在 h2 后的 p 元素的背景色 */
h2~p {
background-color: lightgrey;
}
</style>
</head>
<body>
<h2>标题</h2>
<p>这段文字会变成红色，背景会变成灰色，因为它既是 h2 的直接相邻兄弟，也是 h2 的通用兄弟。</p>
<p>这段文字背景会变成灰色，因为它是 h2 的通用兄弟。</p>
<p>这段文字背景也会变成灰色，同样是 h2 的通用兄弟。</p>
</body>
</html>在这个示例中，第一个 p 元素紧跟在 h2 后，它的文本颜色会变为红色。而所有跟在 h2 后的 p 元素，它们的背景颜色都会变为浅灰色。
