通用兄弟選擇器

此選擇器要比相鄰兄弟選擇器匹配的範圍要廣，沒有"相鄰"的限制。

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>

提交重置程式碼

自動運行

全螢幕