通用兄弟选择器 登录

通用兄弟选择器

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

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>
提交 重置代码
章节 评论 笔记 课件
  • 取消 回复 发送
  • 取消 发布笔记 发送