CSS3 ~ 通用兄弟选择器
通用兄弟选择器，位置无须紧邻，只须同层级，A~B 选择A元素之后所有同层级B元素。
完整CSS选择器参考手册
在线示例
设置同一父元素下的 p 元素之后的每一个 span 元素的字体颜色：
示例
<!DOCTYPE html><html><head><meta charset="utf-8"> <title>基础教程(nhooo.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 选择器。