兄弟选择器

版本： CSS3

定义和用法

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

语法:

E ~ F { sRules }

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

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

浏览器支持

所有浏览器都支持

例子

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

h3 ~ p{color:red;}

<p>p0</p>
<h3>这是一个标题</h3>
<p>p1</p>
<p>p2</p>
<p>p3</p>


//这个例子中，p1/p2/p3都会被选中；而p0因为在h3之前，所以不会被选中


只作用于同级元素 

h3 ~ p{color:#f00;}

<div>
	<h3>这是一个标题</h3>
	<p>p1</p>
</div>
<p>p2</p>
<p>p3</p>


//这个例子中，只有p1会被选中；p2、p3由于与h3并不是同级，所以不会被选中

这是一个标题

p1

p2

p3

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

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

/*兄弟选择符(E~F)*/
h3 ~ p{color:#f00;}

<h3>这是一个标题</h3>
<p>p1</p>
<p>p2</p>
<p>p3</p>



//这个例子中，如果是相邻选择符，那么只有p1会变成红色；如果是兄弟选择符，那么p1/p2/p3都会变成红色；



<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<style>
			p ~ ul{
				background-color:#66cdcc;
				color:red;
			}
		</style>
	</head>
	<body>
	<div>
		<div>一个div元素</div>
		<ul>
		<li>coffee</li>
		<li>tea</li>
		<li>milk</li>
		</ul>
		
		<p>一个p元素</p>
		<ul>
		<li>coffee</li>
		<li>tea</li>
		<li>milk</li>
		</ul>
		
		<h2>另一个ul表</h2>
		<ul>
		<li>coffee</li>
		<li>tea</li>
		<li>milk</li>
		</ul>
	</div>
	</body>
</html>

上篇： 相邻选择器