编辑这个页面须要登录或更高权限！

CSS3 ~ 通用兄弟选择器

通用兄弟选择器，位置无须紧邻，只须同层级，A~B 选择A元素之后所有同层级B元素。

完整CSS选择器参考手册

在线示例

设置同一父元素下的 p 元素之后的每一个 span 元素的字体颜色：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>菜鸟教程(cainiaojc.com)</title>
<style>
p ~ span {
  color: red;
}
</style>
</head>

<body>
<span>This is not red.</span>
<p>Here is a paragraph.</p>
<code>Here is some code.</code>
<span>And here is a span.</span>
</body>
</html>
测试看看 ‹/›

定义和用法

former_element ~ target_element { style properties }

element1~element2 选择器匹配出现在 element1 后面的 element2。

element1 和 element2 这两种元素必须具有相同的父元素，但 element2 不必紧跟在 element1 的后面。

浏览器兼容性

IEFirefoxOperaChromeSafari

所有主流浏览器都支持 element1~element2 选择器。

注意：要想在 IE8 及其更早版本中使用这个选择器，必须声明 <!DOCTYPE>。

完整CSS选择器参考手册

CSS 函数(Functions)CSS 选择器大全

CSS 参考手册
CSS @规则(RULES)
CSS 属性大全