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

首頁 >

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

16.3　結構性偽類選擇器

本節介紹CSS 3中的結構性偽類選擇器。在介紹結構性偽類選擇器之前，先來介紹一下CSS中的偽類選擇器及偽元素。

16.3.1　CSS中的偽類選擇器及偽元素

1.偽類選擇器概述

我們知道，在CSS中，可以使用類選擇器把相同的元素定義成不同的樣式，如針對一個p元素，我們可以做如下所示定義。

p.right{text-align:right}
p.center{text-align:right}

然后在頁面上對p元素使用class屬性，把定義好的樣式指定給具體的p元素，代碼如下所示。

<p class="right">測試文字</p>
<p class="center">測試文字</p>

在CSS中，除了上面所述的類選擇器之外，還有一種偽類選擇器，這種偽類選擇器與類選擇器的區別是，類選擇器可以隨便起名，如上面的“p.right”與“p.center”，你也可以命名為“p.class1”與“p.class2”，然后在頁面上使用“class='class1'”與“class='class2'”，但是偽類選擇器是CSS中已經定義好的選擇器，不能隨便起名。在CSS中我們最常用的偽類選擇器是使用在a（錨）元素上的幾種選擇器，它們的使用方法如下所示。

a:link {color:#FF0000;text-decoration:none}
a:visited {color:#00FF00;text-decoration:none} 
a:hover {color:#FF00FF;text-decoration:underline} 
a:active {color:#0000FF;text-decoration:underline}
2.偽元素選擇器概述

偽元素選擇器是指并不是針對真正的元素使用的選擇器，而是針對CSS中已經定義好的偽元素使用的選擇器，它的使用方法如下所示。

選擇器：偽元素{屬性：值}

偽元素選擇器也可以與類配合使用，使用方法如下所示。

選擇器.類名：偽元素{屬性：值}

在CSS中，主要有如下四個偽元素選擇器。

（1）first-line偽元素選擇器

first-line偽元素選擇器用于向某個元素中的第一行文字使用樣式。

代碼清單16-4是它的一個使用示例，在該示例中，有一個p元素，在該元素內存在兩行文字，使用first-line偽元素選擇器將第一行文字設為藍色。

代碼清單16-4　first-line偽元素使用示例

<!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" />
<title>first-line偽元素使用示例</title>
<style type="text/css">
p:first-line{color:#0000FF}  
</style>
</head>
<body>
<p>段落中的第一行。<br>段落中的第二行</p>
</body>
</html>

這段代碼的運行結果如圖16-6所示。

（2）first-letter偽元素選擇器

first-letter偽元素選擇器用于向某個元素中的文字的首字母（歐美文字）或第一個字（中文或日文等漢字）使用樣式。

代碼清單16-5是first-letter偽元素選擇器的一個使用示例，在該示例中，有兩段文字——一段是英文，另一段是中文，使用first-letter偽元素選擇器來設置這兩段文字的開頭字母或文字的顏色為藍色。

代碼清單16-5　first-letter偽元素選擇器

<!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" />
<title>first-letter偽元素使用示例</title>
<style type="text/css">
p:first-letter{color:#0000FF}  
</style>
</head>
<body>
<p>This is an english text。</p>
<p>這是一段中文文字。</p>
</body>
</html>

這段代碼的運行結果如圖16-7所示。

圖16-6　first-line偽元素使用示例

圖16-7　first-letter偽元素使用示例

（3）before偽元素選擇器

before偽元素選擇器用于在某個元素之前插入一些內容，使用方法如下所示。

// 可以插入一段文字
<元素〉：before
{
    content：插入文字
}
// 也可以插入其他內容
<元素〉：before
{
    content：url(test.wav)
}

代碼清單16-6是before偽元素選擇器的一個使用示例，在該示例中有一個ul列表，該列表中有幾個li列表項目，使用before偽元素選擇器在每個列表項目的文字的開頭插入“·”字符。

代碼清單16-6　before偽元素選擇器的使用示例

<!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" />
<title>before偽元素選擇器使用示例</title>
<style type="text/css">
li:before{content: ·}
</style>
</head>
<body>
<ul>
<li>列表項目1</li>
<li>列表項目2</li>
<li>列表項目3</li>
<li>列表項目4</li>
<li>列表項目5</li>
</li>
</ul>
</body>
</html>

這段代碼的運行結果如圖16-8所示。

（4）after偽元素選擇器

after偽元素選擇器用于在某個元素之后插入一些內容，使用方法如下所示。

<元素>：after
{
    content：插入文字
}
// 也可以插入其他內容
<元素>：after
{
    content：url(test.wav)
}

代碼清單16-7是after偽元素選擇器的一個使用示例，在該示例中有一個ul列表，這個ul列表的內容為某個網站上播放電影的節目清單。該列表中有幾個列表項目，每個列表項目中存放了對于某部電影的超鏈接，使用after偽元素選擇器在每個超鏈接的后面加入“（僅用于測試，請勿用于商業用途。）”的文字，并且將文字顏色設為紅色。

代碼清單16-7　after偽元素選擇器的使用示例

<!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" />
<title>after偽元素選擇器使用示例</title>
<style type="text/css">
li:after{
    content: "(僅用于測試，請勿用于商業用途。)";
    font-size:12px;
    color:red;
}
</style>
</head>
<body>
<h1>電影清單</h1>
<ul>
<li><a href="movie1.mp4">狄仁杰之通天帝國</a></li>
<li><a href="movie2.mp4">精武風云</a></li>
<li><a href="movie3.mp4">大笑江湖</a></li>
</ul>
</body>
</html>

這段代碼的運行結果如圖16-9所示。

圖16-8　before偽元素使用示例

圖16-9　after偽元素選擇器使用示例

16.3.2　選擇器root、not、empty和target

在介紹完了CSS中的偽類選擇器與偽元素選擇器之后，讓我們來看一下CSS 3中的結構性偽類選擇器。結構性偽類選擇器的共同特征是允許開發者根據文檔樹中的結構來指定元素的樣式。

首先，我們來看4個最基本的結構性偽類選擇器——root選擇器、not選擇器、empty選擇器與target選擇器。

1.root選擇器

root選擇器將樣式綁定到頁面的根元素中。根元素是指位于文檔樹中最頂層結構的元素，在HTML頁面中就是指包含著整個頁面的“<html>”部分。

代碼清單16-8為一個HTML頁面，在該頁面中，有一段文章，并且有一個文章的標題。

代碼清單16-8　root選擇器示例的HTML界面

<!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" />
<title>root選擇器</title>
</head>
<body>
<h1>選擇器概述</h1>
<p>
&nbsp;&nbsp;&nbsp;&nbsp;選擇器是CSS3中一個重要的內容。首先需要說明的是，使用選擇
器的目的是為了提高開發人員書寫或修改樣式表時的工作效率，因為在樣式表中，一般會書寫大量
的代碼，在大型網站中，樣式表中的代碼可能會達到幾千行。
</p>
</body>
</html>

針對這個網頁，使用如下所示的root選擇器來指定整個網頁的背景色為黃色，將網頁中body元素的背景色設為綠色。

<style type="text/css">
:root{
    background-color: yellow;
}
body{
    background-color: limegreen;
}
</style>

使用了root選擇器后的運行結果如圖16-10所示。

圖16-10　root選擇器使用示例

另外，在使用樣式指定root元素與body元素的背景時，根據不同的指定條件背景色的顯示范圍會有所變化，這一點請注意。如同樣是上面這個示例，如果采取如下所示的樣式，不使用root選擇器來指定root元素的背景色，只指定body元素的背景色，則整個頁面就全部變成綠色的了。

<style type="text/css">
body{
    background-color: limegreen;
}
</style>

刪除root選擇器后的頁面如圖16-11所示。

圖16-11　刪除root選擇器后的顯示效果

2.not選擇器

如果想對某個結構元素使用樣式，但是想排除這個結構元素下面的子結構元素，讓它不使用這個樣式時，可以使用not選擇器。

譬如針對代碼清單16-8所示的HTML頁面，我們可以使用“body*”語句來指定body元素的背景色為黃色，但是使用“：not（h1）”語句中使用的not選擇器排除h1元素，代碼如下所示。

<style type="text/css">
body *:not(h1){
    background-color: yellow;
}
</style>

使用not選擇器后的運行結果如圖16-12所示。

3.empty選擇器

使用empty選擇器來指定當元素中內容為空白時使用的樣式。例如，在代碼清單16-9所示的HTML頁面中，有一個表格。可以使用empty選擇器來指定當表格中某個單元格內容為空白時，該單元格背景為黃色。

代碼清單16-9　empty選擇器使用示例

<!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" />
<title>empty選擇器</title>
<style type="text/css">
:empty{
    background-color: yellow;
}
</style>
</head>
<body>
<table border="1" cellpading="0" cellspacing="0">
<tr><td>A</td><td>B</td><td>C</td></tr>
<tr><td>D</td><td>E</td><td></td></tr>
</table>
</body>
</html>

使用empty選擇器后的運行結果如圖16-13所示。

圖16-12　使用not選擇器示例

圖16-13　使用empty選擇器示例

4.target選擇器

使用target選擇器來對頁面中某個target元素（該元素的id被當作頁面中的超鏈接來使用）指定樣式，該樣式只在用戶點擊了頁面中的超鏈接，并且跳轉到target元素后起作用。

接下來我們來看一個target選擇器的使用示例。頁面中包含幾個div元素，每個div元素都存在一個書簽，當用戶點擊了頁面中的超鏈接跳轉到該div元素時，該div元素使用target選擇器中指定的樣式，在target選擇器中，指定該div元素的背景色變為黃色。其中指定target選擇器時的代碼如下所示。

target{
    background-color: yellow;
}

該示例的詳細代碼如代碼清單16-10所示。

代碼清單16-10　target選擇器使用示例

<!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" />
<title>target選擇器</title>
<style type="text/css">
:target{
    background-color: yellow;
}
</style>
</head>
<body>
<p id="menu">
<a href="#text1">示例文字1</a> | 
<a href="#text2">示例文字2</a> | 
<a href="#text3">示例文字3</a> | 
<a href="#text4">示例文字4</a> | 
<a href="#text5">示例文字5</a> 
</p>
<div id="text1">
<h2>示例文字1</h2>
<p>...此處略去</p>
</div>
<div id="text2">
<h2>示例文字2</h2>
<p>...此處略去</p>
</div>
<div id="text3">
<h2>示例文字3</h2>
<p>...此處略去</p>
</div>
<div id="text4">
<h2>示例文字4</h2>
<p>...此處略去</p>
</div>
<div id="text5">
<h2>示例文字5</h2>
<p>...此處略去</p>
</body>
</html>

使用target選擇器后的運行結果如圖16-14所示。

圖16-14　使用target選擇器示例

16.3.3　選擇器first-child、last-child、nth-child和nth-last-child

本節介紹first-child選擇器、last-child選擇器、nth-child選擇器與nth-last-child選擇器。利用這幾個選擇器，能夠特別針對一個父元素中的第一個子元素、最后一個子元素、指定序號的子元素，甚至第偶數個或第奇數個子元素進行樣式的指定。

1.單獨指定第一個子元素、最后一個子元素的樣式

接下來，讓我們看一個示例。該示例對ul列表中的li列表項目進行樣式的指定，在樣式中對第一個列表項目與最后一個列表項目分別指定不同的背景色。

如果要對第一個列表項目與最后一個列表項目分別指定不同的背景色，目前為止采取的做法都是：分別給這兩個列表項目加上class屬性，然后對這兩個class使用不同的樣式，在兩個樣式中分別指定不同的背景色。但是，如果使用first-child選擇器與last-child選擇器，這個多余的class屬性就不需要了。

接下來，我們在代碼清單16-11中看一下如何使用first-child選擇器與last-child選擇器將第一個列表項目的背景色指定為黃色，將最后一個列表項目的背景色設定為淺藍色。

代碼清單16-11　first-child選擇器與last-child選擇器使用示例

<!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" />
<title>first-child選擇器與last-child選擇器使用示例</title>
<style type="text/css">
li:first-child{
    background-color: yellow;
}
li:last-child{
    background-color: skyblue;
}
</style>
</head>
<body>
<h2>列表A</h2>
<ul>
<li>列表項目1</li>
<li>列表項目2</li>
<li>列表項目3</li>
<li>列表項目4</li>
<li>列表項目5</li>
</ul>
</body>
</html>

這段代碼的運行結果如圖16-15所示。

圖16-15　first-child選擇器與last-child選擇器使用示例

另外，如果頁面中具有多個ul列表，則該first-child選擇器與last-child選擇器對所有ul列表都適用，如代碼清單16-12所示。

代碼清單16-12　具有多個列表時first-child選擇器與last-child選擇器使用示例

<!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" />
<title>first-child選擇器與last-child選擇器使用示例</title>
<style type="text/css">
li:first-child{
    background-color: yellow;
}
li:last-child{
    background-color: skyblue;
}
</style>
</head>
<body>
<h2>列表A</h2>
<ul>
<li>列表項目1</li>
<li>列表項目2</li>
<li>列表項目3</li>
<li>列表項目4</li>
<li>列表項目5</li>
</ul>
<h2>列表B</h2>
<ul>
<li>列表項目1</li>
<li>列表項目2</li>
<li>列表項目3</li>
<li>列表項目4</li>
<li>列表項目5</li>
</ul>
</body>
</html>

這段代碼的運行結果如圖16-16所示。

另外，first-child選擇器在CSS 2中就已存在，目前為止被Firefox、Safari、Google Chrome、Opera瀏覽器所支持，從IE 7開始被IE瀏覽器所支持。

last-child選擇器從CSS 3開始被提供，目前為止被Firefox、Safari、Google Chrome、Opera瀏覽器所支持，到IE 8為止還沒有獲得IE瀏覽器的支持。

圖16-16　具有多個列表時first-child選擇器與last-child選擇器使用示例

2.對指定序號的子元素使用樣式

如果使用nth-child選擇器與nth-last-child選擇器，不僅可以指定某個父元素中第一個子元素以及最后一個子元素的樣式，還可以針對父元素中某個指定序號的子元素來指定樣式。這兩個選擇器是first-child及last-child的擴展選擇器。這兩個選擇器的樣式指定方法如下所示。

nth-child(n){
// 指定樣式
}
<子元素>：nth-last-child(n){
// 指定樣式
}

將指定序號書寫在“nth-child”或“nth-last-child”后面的括號中，如“nth-child（3）”表示第三個子元素，“nth-last-child（3）”表示倒數第三個子元素。

在代碼清單16-13中，我們給出一個使用這兩個選擇器的示例，在該示例中，指定ul列表中第二個li列表項目的背景色為黃色，倒數第二個列表項目的背景色為淺藍色。

代碼清單16-13　nth-child選擇器與nth-last-child選擇器使用示例

<!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" />
<title>nth-child選擇器與nth-last-child選擇器使用示例</title>
<style type="text/css">
li:nth-child(2){
    background-color: yellow;
}
li:nth-last-child(2){
    background-color: skyblue;
}
</style>
</head>
<body>
<h2>列表A</h2>
<ul>
<li>列表項目1</li>
<li>列表項目2</li>
<li>列表項目3</li>
<li>列表項目4</li>
<li>列表項目5</li>
</ul>
</body>
</html>

這段代碼的運行結果如圖16-17所示。

圖16-17　nth-child選擇器與nth-lastchild選擇器使用示例

另外，這兩個選擇器都是從CSS 3開始被提供，目前為止被Firefox、Safari、Google Chrome、Opera瀏覽器所支持，到IE 8為止還沒有受到IE瀏覽器的支持。

3.對所有第奇數個子元素或第偶數個子元素使用樣式

除了對指定序號的子元素使用樣式以外，nth-child選擇器與nth-last-child選擇器還可以用來對某個父元素中所有第奇數個子元素或第偶數個子元素使用樣式。使用方法如下所示。

nth-child(odd){
// 指定樣式
}
// 所有正數下來的第偶數個子元素
<子元素>:nth-child(even){
// 指定樣式
}
// 所有倒數上去的第奇數個子元素
<子元素>:nth-last-child(odd){
// 指定樣式
}
// 所有倒數上去的第偶數個子元素
<子元素>:nth-last-child(even){
// 指定樣式
}

接下來，我們在代碼清單16-14中看一個使用nth-child選擇器來分別針對ul列表的第奇數個列表項目與第偶數個列表項目指定不同背景色的示例。在該示例中將所有第奇數個列表項目的背景色設為黃色，將所有第偶數個列表項目的背景色設為淺藍色。

代碼清單16-14　使用nth-child對第奇數個、第偶數個子元素使用不同樣式示例

<!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" />
<title>使用nth-child對第奇數個、第偶數個子元素使用不同樣式示例</title>
<style type="text/css">
li:nth-child(odd){
    background-color: yellow;
}
li:nth-child(even){
    background-color: skyblue;
}
</style>
</head>
<body>
<h2>列表A</h2>
<ul>
<li>列表項目1</li>
<li>列表項目2</li>
<li>列表項目3</li>
<li>列表項目4</li>
<li>列表項目5</li>
</ul>
</body>
</html>

這段代碼的運行結果如圖16-18所示。

圖16-18　使用nth-child對第奇數個、第偶數個子元素使用不同樣式示例

另外，使用nth-child選擇器與nth-last-child選擇器時，雖然在對列表項目使用時沒有問題，但是當用于其他元素時，還是會出現問題，在16.3.4節中，我們將闡述會產生哪些問題，以及怎么解決這些問題。

16.3.4　選擇器nth-of-type和nth-last-of-type

1.使用選擇器nth-child和nth-last-child時會產生的問題

之前，我們介紹過將nth-child選擇器與nth-last-child選擇器用于某些元素時，會產生一些問題，這里我們首先來看一下究竟會產生什么問題。

在代碼清單16-15中，我們給出一個HTML頁面代碼，在該頁面中，存在一個div元素，在該div元素中，又給出幾篇文章的標題與每篇文章的正文。

代碼清單16-15　nth-of-type選擇器與nth-last-of-type選擇器使用示例的HTML頁面

<!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" />
<title>nth-of-type選擇器與nth-last-of-type選擇器使用示例</title>
</head>
<body>
<div>
<h2>文章標題A</h2>
<p>文章正文。</p>
<h2>文章標題B</h2>
<p>文章正文。</p>
<h2>文章標題C</h2>
<p>文章正文。</p>
<h2>文章標題D</h2>
<p>文章正文。</p>
</div>
</body>
</html>

為了讓第奇數篇文章的標題與第偶數篇文章的標題的背景色不一樣，我們首先使用nth-child選擇器來進行指定，指定第奇數篇文章的標題背景色為黃色，第偶數篇文章的標題背景色為淺藍色，書寫方法如下所示。

<style type="text/css">
h2:nth-child(odd){
    background-color: yellow;
}
h2:nth-child(even){
    background-color: skyblue;
}
</style>

將上面這段指定樣式的代碼添加到如代碼清單16-15所示的HTML頁面中，然后在瀏覽器中查看該頁面的運行結果，如圖16-19所示。

運行結果并沒有如預期的那樣，讓第奇數篇文章的標題背景色為黃色，第偶數篇文章的標題背景色為淺藍色，而是所有文章的標題都變成了黃色。

這個問題的產生原因在于：nth-child選擇器在計算子元素是第奇數個元素還是第偶數個元素時，是連同父元素中的所有子元素一起計算的。

換句話說，“h2：nth-child（odd）”這行代碼的含義，并不是指“針對div元素中第奇數個h2子元素來使用”，而是指“當div元素中的第奇數個子元素如果是h2子元素時使用”。

所以在上面這個示例中，因為h2元素與p元素相互交錯，所有h2元素都處于奇數位置，所以所有h2元素的背景色都變成了黃色，而處于偶數位置的p元素，因為沒有指定第偶數個位置的子元素的背景色，所以沒有發生變化。

當父元素是列表時，因為列表中只可能有列表項目一種子元素，所以不會有問題，而當父元素是div時，因為div元素中包含多種子元素，所以出現了問題。

2.使用選擇器nth-of-type和nth-last-of-type

在CSS 3中，使用nth-of-type選擇器與nth-last-of-type選擇器來避免這類問題的發生。使用這兩個選擇器時，CSS 3在計算子元素是第奇數個子元素還是第偶數個子元素時，就只針對同類型的子元素進行計算了。這兩個選擇器的使用方法如下所示。

<style type="text/css">
h2:nth-of-type(odd){
    background-color: yellow;
}
h2:nth-of-type(even){
    background-color: skyblue;
}
</style>

把以上這段代碼添加到代碼清單16-15所示頁面中，然后運行該頁面，運行結果如圖16-20所示。

圖16-19　在代碼清單16-15所示的HTML頁面中使用nth-child選擇器

圖16-20　nth-of-type選擇器使用示例

另外，如果計算是奇數還是偶數時需要從下往上倒過來計算，則可以使用nth-last-of-type選擇器來代替nth-last-child選擇器，進行倒序計算。

nth-of-type選擇器與nth-last-of-type選擇器都是從CSS 3開始被提供，目前為止被Firefox、Safari、Google Chrome、Opera瀏覽器所支持，到IE 8為止，還沒有獲得IE瀏覽器的支持。

16.3.5　循環使用樣式

通過前幾節的介紹，我們已經知道，使用nth-child選擇器、nth-last-child選擇器、nth-of-type選擇器與nth-last-of-type選擇器，我們可以對父元素中指定序號的子元素、第奇數個子元素、第偶數個子元素來單獨進行樣式的指定，這里我們再通過代碼清單16-16所示示例，復習一下nth-child選擇器的用法。在該示例中，有一個ul列表，通過nth-child選擇器來指定該列表中第一個列表項目、第二個列表項目、第三個列表項目及第四個列表項目的背景色。

代碼清單16-16　使用nth-child選擇器指定項目背景色

<!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" />
<title>使用nth-child選擇器指定項目背景色</title>
<style type="text/css">
li:nth-child(1) {
   background-color: yellow;
}
li:nth-child(2) {
   background-color: limegreen;
}
li:nth-child(3) {
   background-color: red;
}
li:nth-child(4) {
   background-color: white;
}
</style>
</head>
<body>
<ul>
<li>列表項目1</li>
<li>列表項目2</li>
<li>列表項目3</li>
<li>列表項目4</li>
<li>列表項目5</li>
<li>列表項目6</li>
<li>列表項目7</li>
<li>列表項目8</li>
<li>列表項目9</li>
<li>列表項目10</li>
<li>列表項目11</li>
<li>列表項目12</li>
</ul>
</body>
</html>

這段代碼的運行結果如圖16-21所示。

在圖中，我們可以看見該列表中前四個列表項目的背景色已設定好，其他列表項目的背景色均未設定。現在，要討論一個問題，如果開發者想對所有的列表項目都設定背景色，但是不采用這種一個個列表項目分別指定的方式（如果有100個列表項目的話，工作量就太大了），而是采用循環指定的方式，讓剩下來的列表項目循環采用一開始已經指定好的背景色，應該怎么處理呢？

這時，仍然可以采用nth-child選擇器，只需在“nth-child（n）”語句處，把參數n改成可循環的an+b的形式就可以了。a表示每次循環中共包括幾種樣式，b表示指定的樣式在循環中所處位置。如此處是4種背景色作為一組循環，則將代碼清單16-16中樣式指定的代碼修改成如下所示的指定方法。

<style type="text/css">
li:nth-child(4n+1) {
    background-color: yellow;
}
li:nth-child(4n+2) {
    background-color: limegreen;
}
li:nth-child(4n+3) {
    background-color: red;
}
li:nth-child(4n+4) {
    background-color: white;
}
</style>

用這段代碼替代代碼清單16-16中樣式指定的代碼，然后運行代碼清單16-16，運行結果如圖16-22所示。

圖16-21　使用nth-child選擇器指定項目背景色

圖16-22　循環使用樣式示例

在運行結果中，我們可以清楚地看到，所有列表項目均循環使用了開頭四個列表項目中的背景色。

另外，“4n+4”的寫法可略寫成“4n”的形式。

因此，前面我們所說的nth-child（odd）選擇器和nth-child（even）選擇器實際上都可以采用如下形式進行代替。

// 所有正數下來的第奇數個子元素
<子元素>:nth-child(2n+1){
// 指定樣式
}
// 所有正數下來的第偶數個子元素
<子元素>:nth-child(2n+2){
// 指定樣式
}
// 所有倒數上去的第奇數個子元素
<子元素>:nth-last-child(2n+1){
// 指定樣式
}
// 所有倒數上去的第偶數個子元素
<子元素>:nth-last-child(2n+2){
// 指定樣式
}

16.3.6　only-child選擇器

采用如下所示的方法并結合運用nth-child選擇器與nth-last-child選擇器，則可指定當某個父元素中只有一個子元素時才使用的樣式。

<子元素>:nth-child(1)：nth-last-child(1){
    // 指定樣式
}

接下來，我們看一個示例，該示例中有兩個ul列表，一個ul列表里有幾個列表項目，另一個ul列表里只有一個列表項目。在樣式中指定li列表的背景色為黃色，但是由于采用了結合運用nth-child選擇器與nth-last-child選擇器并且將序號都設定為1的處理，所以顯示出來的頁面中只有擁有唯一列表項目的那個ul列表中的列表項目背景色變為黃色。代碼如代碼清單16-17所示。

代碼清單16-17　只對唯一列表項目使用樣式示例

<!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" />
<title>只對唯一列表項目使用樣式示例</title>
<style type="text/css">
li:nth-child(1):nth-last-child(1){
    background-color: yellow;
}
</style>
</head>
<body>
<h2>ul列表A</h2>
<ul>
<li>列表項目A01</li>
</ul>
<h2>ul列表B</h2>
<ul>
<li>列表項目B01</li>
<li>列表項目B02</li>
<li>列表項目B03</li>
</ul>
</body>
</html>

這段代碼的運行結果如圖16-23所示。

圖16-23　只對唯一列表項目使用樣式示例

另外，可以使用only-child選擇器來代替使用“nth-child（1）：nth-last-child（1）”的實現方法。如在上面這個示例中，可以將樣式指定中的代碼改成如下所示的指定方法。

<style type="text/css">
li:only-child{
    background-color: yellow;
}
</style>

讀者可自行將上面示例中的樣式指定代碼用這段代碼進行替代，然后在瀏覽器中重新查看運行結果。另外，也可使用only-of-type選擇器來替代“nth-of-type（1）：nth-last-of-type（1）”，通過結合使用nth-of-type選擇器與nth-last-of-type選擇器來讓樣式只對唯一子元素起作用。nth-of-type選擇器與nth-last-of-type選擇器的作用與使用方法在前文已經介紹，此處不再贅述。

主站蜘蛛池模板： 前郭尔| 怀化市| 长岭县| 鄂尔多斯市| 蒲江县| 临潭县| 南通市| 溧水县| 东乡县| 韶关市| 天门市| 易门县| 建水县| 嘉峪关市| 平昌县| 安西县| 湄潭县| 绥江县| 邵东县| 宁乡县| 庆云县| 三河市| 郁南县| 荃湾区| 高密市| 朔州市| 沙坪坝区| 泌阳县| 肥东县| 全南县| 台中市| 闸北区| 三亚市| 合作市| 泸水县| 专栏| 于都县| 恩施市| 黄梅县| 乐业县| 长武县|