通用兄弟選擇器

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

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元素的字體設定為紅色。

######
繼續學習
||
<!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>