css 获取前后同级兄弟元素的方法

作者：System 时间：2024年08月09日分类：所有,css 字数：642

这篇文章距离上次修改已过204天，其中的内容可能已经有所变动。

在CSS中，获取前后同级兄弟元素可以使用相邻兄弟选择器（+）和一般兄弟选择器（~）。




/* 选择p元素后紧跟的第一个div元素 */
p + div {
  /* 样式规则 */
}




/* 选择p元素后的所有div兄弟元素 */
p ~ div {
  /* 样式规则 */
}

实例代码：




<div>Div 1</div>
<p>Paragraph</p>
<div>Div 2</div>
<div>Div 3</div>
<p>Another Paragraph</p>
<div>Div 4</div>




/* 仅选中紧跟在p元素后的第一个div */
p + div {
  color: red;
}
 
/* 选中所有跟在p元素后的div元素 */
p ~ div {
  background-color: yellow;
}

在这个例子中，p + div 只会给紧跟在一个 <p> 元素后的第一个 <div> 应用样式，而 p ~ div 会应用样式到所有跟在 <p> 元素后的 <div> 元素。