极客教程CSS 下一个兄弟元素
在 CSS 中，我们经常需要选取某个元素的下一个兄弟元素来进行样式设置或其他操作。为了方便选择下一个兄弟元素，我们可以使用 CSS 选择器中的 “+” 符号来实现。
语法
使用 “+” 符号可以选择指定元素的下一个兄弟元素。
element + selector {
/* styles */
}
- element: 指定元素，要选择它的下一个兄弟元素。
- +: 紧邻元素选择器，表示选择指定元素的下一个兄弟元素。
- selector: 要选择的下一个兄弟元素的选择器。
示例
假设有如下 HTML 结构：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS 下一个兄弟元素</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<p>第一个段落</p>
<p>第二个段落</p>
<div>一个 div 元素</div>
<p>第三个段落</p>
</body>
</html>
我们想要选择第二个段落元素后的 div 元素，并设置其背景颜色为灰色。我们可以这样写 CSS：
p + div {
background-color: gray;
}
这样就可以选择第二个段落元素后的 div 元素，并将其背景颜色设置为灰色。
运行结果
在浏览器中打开上述 HTML 文档，应该可以看到第三个段落元素后的 div 元素背景颜色变为灰色。
通过使用 CSS 中的 “+” 符号，我们可以方便地选择指定元素的下一个兄弟元素，并对其进行样式设置，实现更灵活多样的页面布局和样式效果。