CSS3 后续兄弟组合器 (~)

定义和用法

CSS 后续兄弟组合器 (~) 匹配所有在第一个元素 (element1) 之后出现的 element2。

element1 和 element2 必须共享相同的父元素，但 element2 不必紧跟在 element1 之后。

实例

选择并设置所有在 <p> 元素之后且共享相同父元素的 <ul> 元素的样式：

p ~ ul {
  background-color: gold;
  border: 1px solid gray;
}

亲自试一试

CSS 语法

element1 ~ element2 {
  css declarations;
}

技术细节

版本： CSS3

浏览器支持

表格中的数字表示完全支持该组合器的首个浏览器版本。

Chrome Edge Firefox Safari Opera
4.0 7.0 3.5 3.2 9.6