兄弟选择符(E~F)

版本：CSS3

语法：

E~F { sRules }

说明：

选择E元素后面的所有兄弟元素F。

与相邻选择符不同的是，兄弟选择符会命中所有符合条件的兄弟元素，而不强制是紧邻的元素。

E~F VS. E+F：

<style> /* 相邻选择符(E+F) */ p+p{color:#f00;} /* 兄弟选择符(E~F) */ p~p{color:#f00;} </style> <p>p1</p> <p>p2</p> <h3>这是一个标题</h3> <p>p3</p> <h3>这是一个标题</h3> <p>p4</p> <p>p5</p>

此例，如果使用p + p{color:#f00;}，那么p2, p5将会变成红色；如果使用p ~ p{color:#f00;}，那么p2,p3,p4,p5将会变成红色；

兼容性：

浅绿 = 支持
红色 = 不支持
粉色 = 部分支持

IE	Firefox	Chrome	Safari	Opera	iOS Safari	Android Browser	Android Chrome
6.0	2.0+	4.0+	3.1+	3.5+	3.2+	2.1+ ^#1	18.0+
7.0+	2.0+	4.0+	3.1+	3.5+	3.2+	2.1+ ^#1	18.0+

在Android Browser4.2.*及以下，伪元素:checked与该选择符一起使用会有一个bug，查看详情。

示例：