通用兄弟选择器
此选择器要比相邻兄弟选择器匹配的范围要广,没有"相邻"的限制。
E ~ F
以上是创建通用兄弟选择器的格式。E和F必须具有同一个父元素,并且F元素在E元素的后面,代码实例如下:
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://ask.php.cn/" />
<title>php中文网</title>
<style type="text/css">
li{color:blue}
.antzone ~ li{
color:red;
}
</style>
</head>
<body>
<ul>
<li>php中文网一</li>
<li class="antzone">php中文网二</li>
<li>php中文网三</li>
<li>php中文网四</li>
</ul>
</body>
</html>
以上代码可以将antzone后面的所有li元素的字体设置为红色。