子代選擇符使用一個額外的符號（角括弧> ）表明兩個元素之間的關係。
例如：body>h1 選取的是<body>標籤裡的所有第一代<h1>標籤。
HTML標籤的關係圖
HTML代碼
<h1>body裡面的h1標題</h1><p> <h2>p裡面的h2</h2> <p> p裡面的p標籤，p標籤裡面有一個<strong><a href="#">加粗的連結</a></strong> </p></p><h2>body裡面的h2標題</h2><ul> <li>列表1 <ul> <li>小列表a</li> <li>小列表b</li> <li>小列表c</li> </ul> </li> <li> <a href="#">列表2（帶連結）</a> </li> <li> <a href="#">列表3（帶連結）</a> </li></ul>
弄懂上面的結構之後，可以試試下面代碼：
CSS代碼
body>h2 { color: orange;}
上面HTML代碼裡面，一共有2個<h2>標籤，但<body>只有一個子代的<h2>，另一個<h2>是在<p>裡面的，所以上面的CSS代碼只作用在第一個<h2>標籤。
下面是比較好玩的子選擇符
:first-child
選取第一個子標籤。
CSS代碼
h2:first-child { color: orange;}
這個選擇符的作用是：先找到網頁中所有<h2>標籤，通過<h2>標籤找到其父元素，再判斷<h2>標籤在其父元素中是否排第一個。
這裡因為<body>的第一個標籤是<h1>，所以<body>的子項目<h2>沒被樣式作用到。
因為<p>裡的<h2>是<p>的第一個子項目，所以<p>裡的<h2>變成了橙色字。
:last-child
這個選擇符與 :first-child 選擇符的作用類似，不過選取的是一個元素的最後一個子代。
CSS代碼
li:last-child { font-size: 2em;}
可以看到，“小列表C”和“列表3（帶連結）”的字型大小變大了。因為這兩項都是被指定的最後一項。
:only-child
選取某個元素唯一的子代。
HTML代碼
<p> <p>第一個p的p</p></p><p> <p>第二個p的第一個p</p> <a href="#">第二個p的第一個a</a></p>
CSS代碼
p:only-child { color: orange;}
上述樣式只作用在第一個<p>的<p>元素。第二個<p>裡因為不止<p>元素，還有<a>元素，所以第二個<p>的<p>元素不會被上述樣式影響。
這個選擇符比較難理解。僅當指定的標籤是另一個標籤的唯一子代時，這個選擇符定義的樣式才有效。也就是說，子代中只有一個指定的標籤還不行，如果指定的標籤有其他同輩標籤，這個選擇符定義的樣式就會失效。
:nth-child
這個選擇符用法比較複雜，不過也特別有用。
這個選擇符可以輕易地為表格中相隔的行、列表中相隔兩個項目的項目或相隔其他數目的子代元素定義樣式。
這個選擇符需要一個值，用於確定選取哪些子代。
其中最簡單的值是關鍵字，即odd和even。
odd用於選取奇數子代元素。
even用於選取偶數子代元素。
HTML代碼
<ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> <li>7</li></ul>
CSS代碼
li:nth-child(odd) { background: pink;}li:nth-child(even) { background: teal;}
第一個子項目的下標是 1。
需要注意的是，如果在第一個<li>之前還有其他元素，那第一個<li>的下標就不是1了。
比如
HTML代碼
<ul> <a href="#">a</a> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> <li>7</li></ul>
這時的效果是
li:nth-child(odd) 的意思是找到<li>元素的父元素，通過父元素來檢測每一個<li>的下標的奇偶。
因為<ul>的第一個元素是<a>，第二個元素才是<li>。也就是說，第一個<li>的下標是2，所以第一個下標賦的樣式是綠色的背景。
使用上面的方法可以讓表格裡的各行交替使用不同的樣式特別簡單。不過，:nth-child() 還有一些更妙更強大的用法。
可以給 :nth-child() 指定一個數字，精確選擇某個子代。比如說要讓第4個<li>的背景色改成橙色。
HTML代碼
<ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> <li>7</li></ul>
CSS代碼
li:nth-child(4) { background: orange;}
同樣的，這裡的 li:nth-child(4) 的意思，是找到<li>標籤的父元素，然後尋找父元素的第4個子項目。
如果HTML代碼是下面這樣，CSS代碼不變的情況下。
HTML代碼
<ul> <a href="#">a</a> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> <li>7</li></ul>
效果就會變成這樣：
會選中第3個<li>。因為第3個<li>在其父元素裡面是排第4的。
如果想每隔2個項目選中第三個項目，可以在數字後面加上字母n。
HTML代碼
<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>0</li></ul>
CSS代碼
li:nth-child(3n) { background: orange;}
每當遇到3的整數倍的那個元素，就會應用規定的樣式。
如果想從第二個子代元素開始算起，選取每隔2個元素的第三個子代元素。可以在3n後面加個2。
HTML代碼
<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>0</li></ul>
CSS代碼
li:nth-child(3n+2) { background: orange;}
如果想從第5個開始算起，每隔2個元素的第三個子代元素更改樣式。
CSS代碼
li:nth-child(3n+5) { background: orange;}
如果想反向遍曆，n前面的倍數就要修改成負數。
CSS代碼
li:nth-child(-n+3) { background: orange;}
意思是：從列表的第三個條目算起，選取在此之前的每個條目。
如果想從第4個元素開始，往下選取所有元素。可以這樣寫：
CSS代碼
li:nth-child(n+4) { background: orange;}
以下是子代選擇符總覽表
相關推薦：
如何寫出高效的CSS選擇符
CSS選擇符定義與用法匯總
CSS選擇符
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
