通用兄弟选择器

此选择器要比相邻兄弟选择器匹配的范围要广，没有"相邻"的限制。

E ~ F

以上是创建通用兄弟选择器的格式。E和F必须具有同一个父元素，并且F元素在E元素的后面，代码实例如下:

<!DOCTYPE html>

<html>

<head>

<title>php中文网</title>

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元素的字体设置为红色。

继续学习

新建文件

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://ask.php.cn/" /> <title>CSS教程</title> <style type="text/css"> div~p{color:blue} </style> </head> <body> <div>php中文网一</div> <p>php中文网二</p> <span>php中文网三</span> <p>php中文网四</p> </body> </html>

提交重置代码

自动运行

章节

课件

捐赠

通用兄弟选择器

CSS3从入门到精通教程