標籤：src 底部 一段 一個 sharp image 運算式 設定 text
CSS3 結構性偽類別選取器—first-child“:first-child”選取器表示的是選擇父元素的第一個子項目的元素E。簡單點理解就是選擇元素中的第一個子項目，記住是子項目，而不是後代元素。
樣本示範
通過“:first-child”選取器定位列表中的第一個清單項目，並將序號顏色變為紅色。
HTML代碼：
<ol> <li><a href="##">Link1</a></li> <li><a href="##">Link2</a></li> <li><a href="##">link3</a></li></ol>
CSS代碼：
ol > li{ font-size:20px; font-weight: bold; margin-bottom: 10px;}ol a { font-size: 16px; font-weight: normal;}ol > li:first-child{ color: red;}
示範結果：
程式碼範例：
<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>結構性偽類別選取器—first-child</title> <style type="text/css"> ul>li:first-child{ font-size: 12px; color:slateblue; } </style></head><body><ul> <li><a href="##">你好嗎0</a></li> <li><a href="##">你好嗎1</a></li> <li><a href="##">你好嗎2</a></li> <li><a href="##">你好嗎3</a></li> <li><a href="##">你好嗎4</a></li></ul></body></html>
效果：
:first-child 選取器用於選取屬於其父元素的首個子項目的指定選取器。——w3school
嗯，乍一看好像說的不是很明白，因此這個選取器很容易讓人誤解，通常會有兩種誤解：
誤解一：認為E:first-child選中E元素的第一個子項目。
誤解二：認為E:first-child選中E元素的父元素的第一個E元素。
你是不是也曾這樣理解這個選取器或者現在仍然這樣理解？以上兩種理解都是錯誤的，為了證明上面兩種理解是錯的，看看下面的執行個體
<!--誤解一--><style>div:first-child{color: red;}</style><div class="demo"><a>一個連結</a><a>一個連結</a><a>一個連結</a><a>一個連結</a></div>
效果是這樣的：
很明顯，照第一種理解，應該只有第一個a元素字型顏色變紅，然而事實上全部變紅了。
<!--誤解二--><style>div a:first-child{color: red;}</style><div class="demo"><p>一個段落</p><a>一個連結</a><a>一個連結</a><a>一個連結</a><a>一個連結</a></div>
效果是這樣的：
照第二種理解，div裡的第一個a元素字型應該是紅色的，事實證明這種理解也是錯的。
OK，正確的理解應該是：只要E元素是它的父級的第一個子項目，就選中。它需要同時滿足兩個條件，一個是“第一個子項目”，另一個是“這個子項目剛好是E”。
style>span:first-child{color: red;}p:first-child{color: blue;} /*p元素的父元素的第一個子項目是div而不是p元素，因此該樣式不起作用*/i:first-child{color: orange;}</style><div class="demo"><div>.demo的第一個子項目是div</div><!--第一個span元素是它的父級P元素的第一個span，顏色變紅色--><p><span>第一個span</span>第一個段落P<span>第二個span</span></p><!--第一個i元素是它的父級a元素的第一個i，顏色變橙色--><p>一個連結<i>第一個i元素</i></p><!--第二個i元素是它的父級a元素的第一個i，顏色變橙色--><p>一個連結<i>第二個i元素</i></p><p>一個連結</p></div>
效果：
CSS3 結構性偽類別選取器—last-child“:last-child”選取器與“:first-child”選取器作用類似，不同的是“:last-child”選取器選擇的是元素的最後一個子項目。例如，需要改變的是列表中的最後一個“li”的背景色，就可以使用這個選取器，
ul>li:last-child{background:blue;}
樣本示範
在部落格的排版中，每個段落都有15px的margin-bottom，假設不想讓部落格“post”中最後一個段落不需要底部的margin值，可以使用“:last-child”選取器。
HTML代碼：
<div class="post"> <p>第一段落</p> <p>第二段落</p> <p>第三段落</p> <p>第四段落</p> <p>第五段落</p></div>?
CSS代碼：
.post { padding: 10px; border: 1px solid #ccc; width: 200px; margin: 20px auto;}.post p { margin:0 0 15px 0;}.post p:last-child { margin-bottom:0;}
示範結果：
程式碼範例:
<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>結構偽類別選取器——last-child</title> <style type="text/css"> ul { border: 1px solid #ccc; list-style: none outside none; width: 220px; margin: 20px auto; padding: 0; } ul > li { list-style: none outside none; margin:0; padding: 10px; border-bottom: 3px solid #ccc; } ul > li:last-child { border-bottom: none; background:blue; } </style></head><body><ul> <li>Item1</li> <li>Item2</li> <li>Item3</li> <li>Item5</li> <li>Item6</li></ul></body></html>
效果：
CSS3 結構性偽類別選取器—nth-child(n)
“:nth-child(n)”選取器用來定位某個父元素的一個或多個特定的子項目。其中“n”是其參數，而且可以是整數值(1,2,3,4)，也可以是運算式(2n+1、-n+5)和關鍵詞(odd、even)，但參數n的起始值始終是1，而不是0。也就是說，參數n的值為0時，選取器將選擇不到任何匹配的元素。
經驗與技巧:當“:nth-child(n)”選取器中的n為一個運算式時，其中n是從0開始計算，當運算式的值為0或小於0的時候，不選擇任何匹配的元素。如下表所示：
案例示範
通過“:nth-child(n)”選取器，並且參數使用運算式“2n”，將偶數行列表背景色設定為橙色。
HTML代碼：
<ol> <li>item1</li> <li>item2</li> <li>item3</li> <li>item4</li> <li>item5</li> <li>item6</li> <li>item7</li> <li>item8</li> <li>item9</li> <li>item10</li></ol>?
CSS代碼：
ol > li:nth-child(2n){ background: orange;}
示範結果：
程式碼範例：
<!DOCTYPE html><html><head> <meta charset="utf-8"><title>結構性偽類別選取器—nth-child(n)</title><style type="text/css"> ol > li:nth-child(2n+1){ background: green;}</style></head> <body><ol> <li>item1</li> <li>item2</li> <li>item3</li> <li>item4</li> <li>item5</li> <li>item6</li> <li>item7</li> <li>item8</li> <li>item9</li> <li>item10</li></ol></body></html>
效果：
CSS3 結構性偽類別選取器—nth-last-child(n)
“:nth-last-child(n)”選取器和前面的“:nth-child(n)”選取器非常的相似，只是這裡多了一個“last”，所起的作用和“:nth-child(n)”選取器有所區別，從某父元素的最後一個子項目開始計算，來選擇特定的元素。
案例示範
挑選清單中倒數第五個清單項目，將其背景設定為橙色。
HTML代碼：
<ol> <li>item1</li> <li>item2</li> <li>item3</li> <li>item4</li> <li>item5</li> <li>item6</li> <li>item7</li> <li>item8</li> <li>item9</li> <li>item10</li> <li>item11</li> <li>item12</li> <li>item13</li> <li>item14</li> <li>item15</li></ol>?
CSS代碼：
ol > li:nth-last-child(5){ background: orange;}
示範結果：
參考：http://www.imooc.com
http://www.cnblogs.com/wangmeijian/p/4562304.html
CSS3 結構性偽類別選取器（2）
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
