16.5　通用兄弟元素选择器

关于选择器部分，最后要介绍的一个选择器是通用兄弟元素选择器，它用来指定位于同一个父元素之中的某个元素之后的所有其他某个种类的兄弟元素所使用的样式。它的使用方法如下所示。

<子元素> ~<子元素之后的同级兄弟元素> {
// 指定样式
}

这里的同级是指子元素和兄弟元素的父元素是同一个元素。

代码清单16-28为一个通用兄弟元素选择器的使用示例，该示例中对所有div元素之后的，与div元素处于同级的p元素指定其背景色为绿色，但是对div元素内部的p元素的背景色不做指定。

代码清单16-28　通用兄弟元素选择器的使用示例

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<style type="text/css">
div ~ p {background-color:#00FF00;}
</style>
<title>通用兄弟元素选择器 E ~ F</title>
</head>
<body>
<div style="width:733px; border: 1px solid #666; padding:5px;">
<div>
    <p>p元素为div元素的子元素</p>
    <p>p元素为div元素的子元素</p>
</div>
<hr />
<p>p元素为div元素的兄弟元素</p>
<p>p元素为div元素的兄弟元素</p>
<hr />
<p>p元素为div元素的兄弟元素</p>
<hr />
<div>p元素为div元素的子元素</div>
<hr />
<p>p元素为div元素的兄弟元素</p>
</div>
</body>
</html>

这段代码的运行结果如图16-37所示。

图16-37　通用兄弟元素选择器的使用示例

上一章目录下一章