通用兄弟选择器

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

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


Weiter lernen
||
<!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>
einreichenCode zurücksetzen