iphone模拟器手机版下载

2.6 CSS的層次選擇符

層次選擇符通過HTML的DOM元素之間的層次關系獲取元素，其主要的層次關系包括后代、父子、相鄰兄弟和通用兄弟幾種關系，通過其中某類關系可以方便快捷地選定需要的元素。

后代選擇符也稱為包含選擇符，作用就是可以選擇某個元素的后代元素，如“X Y”，X為祖先元素，Y為后代元素，X Y表示選擇X元素中所包含的所有Y元素。這里的Y元素不管是X元素的子元素、孫輩元素，還是與X元素有更深層次的關系，都將被選中。換句話說，不論Y在X中有多少層級關系，Y元素都將被選中。

技能案例：使用后代選擇符定義樣式

源文件：源文件\第2章\2-6-1.html

（1）新建HTML文檔，創建style標簽，在style標簽中定義如下的CSS樣式：

（2）對<h1>標簽中所包含的<span>標簽進行樣式設置，代碼如下：

（3）圖2-13所示為案例的完整代碼，圖2-14所示為在瀏覽器中預覽的頁面效果。

圖2-13 案例的完整代碼

圖2-14 在瀏覽器中預覽的頁面效果

<h1>標簽中的所有<span>標簽將被應用font-weight:bold的樣式設置，需注意的是，僅對有此結構的標簽有效，對于單獨存在的<h1>標簽或單獨存在的<span>標簽，以及其他非<h1>標簽包含的<span>標簽均無效。

這樣做能幫助避免過多的id及class的設置，可以直接對需要設置的元素進行設置。

子選擇符只能選擇某元素的子元素，如“X > Y”，X為父元素，Y為子元素， X > Y表示選擇X元素中包含的所有Y元素。

子選擇符與后代選擇符不同，在后代選擇符中，Y是X的后代元素，無論有多少層級關系Y元素都會被選中，而在子選擇符中Y僅是X的子元素。

相鄰兄弟選擇符可以選擇某個元素之后與其相鄰的元素，它們具有一個相同的父元素。換句話說，X和Y是同輩元素，Y元素在X元素的后面，并且X和Y元素相鄰，這樣就可以使用相鄰兄弟選擇符來選擇Y元素。

技能案例：使用相鄰兄弟選擇符設置樣式

源文件：源文件\第2章\2-6-3.html

（1）新建一個HTML文檔，在<body>標簽中輸入如下的HTML代碼：

（2）如果需要定義應用了類名稱active的<li>標簽之后緊鄰的<li>標簽的樣式，就可以使用相鄰兄弟選擇符。在style標簽中，定義如下的樣式：

（3）通過該相鄰兄弟選擇符設置樣式，可以使應用了類名稱active的<li>標簽之后緊鄰的<li>標簽顯示所定義的樣式效果。圖2-15所示為案例的完整代碼，圖2-16所示為在瀏覽器中預覽的頁面效果。

圖2-15 案例的完整代碼

圖2-16 在瀏覽器中預覽的頁面效果

通用兄弟選擇符是CSS中的一種用于選擇某個元素之后的所有兄弟元素的選擇符，其與相鄰兄弟選擇符類似，它們需要在同一個父元素之中。也就是說，X和Y是同輩元素，并且Y元素在X元素之后，通用兄弟選擇符可以選擇X元素之后的所有Y元素。

技能案例：使用通用兄弟選擇符定義樣式

源文件：源文件\第2章\2-6-4.html

（1）新建一個HTML文檔，在<body>標簽中輸入如下的HTML代碼：

（2）如果需要定義應用了類名稱active的<li>標簽之后所有的<li>標簽的樣式，就可以使用通用兄弟選擇符，樣式設置如下：

（3）通過該通用兄弟選擇符設置樣式，可以使應用了類名稱active的<li>標簽之后所有在同一父元素中的<li>標簽顯示所定義的樣式效果。圖2-17所示為案例的完整代碼，圖2-18所示為在瀏覽器中預覽的頁面效果。

圖2-17 案例的完整代碼

圖2-18 在瀏覽器中預覽的頁面效果

層次選擇符的瀏覽器兼容性如表2-4所示。

表2-4 層次選擇符的瀏覽器兼容性