pg电子怎么买免费

書名： HTML 5與CSS 3權威指南（第4版·下冊）
作者名：陸凌牛
本章字數： 355字
更新時間： 2019-03-04 18:29:52

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　通用兄弟元素選擇器的使用示例

官术网_书友最值得收藏!

HTML 5與CSS 3權威指南（第4版·下冊）

16.5 通用兄弟元素選擇器

16.5　通用兄弟元素選擇器