兄弟选择器

版本：CSS3

定义和用法

• E~F用于选择第一个元素之后所有的兄弟级的元素。只作用于同级元素.
• 这两个元素必须具有相同的父元素。F不必紧跟E。

语法:

选择E元素后面的所有兄弟元素F，元素E与F必须同属一个父级。

需要注意的是，选择的只是同级的元素F，后代中的元素不会被选择。

浏览器支持

例子

只选择E元素之后的元素F，出现在E元素之前的元素F，不会被选择到。

h3 ~ p{color:red;} 
p0
这是一个标题
p1
p2
p3
//这个例子中，p1/p2/p3都会被选中；而p0因为在h3之前，所以不会被选中

只作用于同级元素

h3 ~ p{color:#f00;} 
这是一个标题
p1
p2
p3
//这个例子中，只有p1会被选中；p2、p3由于与h3并不是同级，所以不会被选中

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

/*相邻选择符(E+F)*/
h3 + p{color:#f00;}

/*兄弟选择符(E~F)*/
h3 ~ p{color:#f00;} 
这是一个标题
p1
p2
p3
//这个例子中，如果是相邻选择符，那么只有p1会变成红色；如果是兄弟选择符，那么p1/p2/p3都会变成红色；

p ~ ul{
				background-color:#66cdcc;
				color:red;
			} 
一个div元素
coffee
tea
milk
一个p元素
coffee
tea
milk
另一个ul表
coffee
tea
milk

鹏仔微信 15129739599 鹏仔QQ344225443 鹏仔前端 pjxi.com 共享博客 sharedbk.com