📅 最后修改于: 2023-12-03 15:06:08.971000 🧑 作者: Mango
在 CSS 中，“+”（加号）表示选择紧接着前一个元素的兄弟元素。
以下是该选择器的语法：
前一个元素 + 目标元素 {
/* CSS 样式 */
}
在上述语法中，“前一个元素”是指你想要选择的某个 DOM 元素，而“目标元素”则是该元素后的兄弟元素。
举个例子：
<div class="first">第一个 div 元素</div>
<p>这是一个段落</p>
<p>这是另一个段落</p>
假设你想要选择前面那个 div 元素后面的第一个 p 元素，你可以这样编写 CSS：
.first + p {
background-color: yellow;
}
在上述代码片段中，我们将背景颜色设置为黄色，因此会将紧接在该 div 元素之后的第一个 p 元素的背景颜色设置为黄色。
下面是一个例子程序，演示了如何使用加号（+）选择器及其工作方式：
<!DOCTYPE html>
<html>
<head>
<style>
div + p {
background-color: yellow;
}
</style>
</head>
<body>
<h2>使用加号（+）选择器选择紧接着前一个元素的兄弟元素</h2>
<div>
<p>这个段落前面没有 div 元素，所以不会被选中。</p>
</div>
<div>
<p>这是一个段落，前面有一个 div 元素，所以背景颜色变成了黄色。</p>
</div>
<div>
<p>这是另一个段落，也前面有一个 div 元素，所以背景颜色也变成了黄色。</p>
</div>
</body>
</html>
上述程序会选择所有与 div 元素紧接着相邻的 p 元素，并将它们的背景颜色设置为黄色。
总之，“+”（加号）选择器是一种强大的工具，可让你轻易地选择紧接着前一个元素的兄弟元素。它适用于所有类型的 HTML 元素，并且与其他 CSS 选择器一同使用时能够实现更高级的样式控制。