相邻兄弟选择器

Avatar of Sara Cope
Sara Cope

DigitalOcean 为您旅程的每个阶段提供云产品。 立即开始使用 $200 免费积分!

CSS 中的相邻兄弟选择器本身不是一个选择器,而是一种组合两个选择器的方式。 例如

p + p {
  margin: 0;
}

加号 (+) 是相邻兄弟选择器,位于两个段落标签(元素)选择器之间。 这意味着“选择紧跟在另一个段落标签之后的任何段落标签(两者之间没有任何内容)”。 以下是它将选择的示例

<div>
  <p>I'm a paragraph</p>
  <p>I get selected!</p>
</div>

<div>
  <p>I'm a paragraph</p>
  <h2>Monkey hair</h2>
  <p>I will NOT get selected</p>
</div>

这在使用语义标记并需要调整某些元素彼此直接相邻的情况时非常有用。

查看 CodePen 中的 相邻兄弟选择器,作者是 Sara Cope (@saracope),来自 CodePen

更多资源

浏览器支持

Chrome Safari Firefox Opera IE Android iOS
任何 任何 任何 任何 7+ 任何 任何