html兄弟选择器怎么用,兄弟选择器 - 选择后面相邻的所有兄弟元素 - css3普通选择器...

兄弟选择器

版本：CSS3

定义和用法E~F用于选择第一个元素之后所有的兄弟级的元素。只作用于同级元素.

这两个元素必须具有相同的父元素。F不必紧跟E。

语法:E~F{sRules}

选择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并不是同级，所以不会被选中

这是一个标题

p1

p2

p3

与相邻选择符(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