CSS3中新增了幾個子元素選擇器，大大提高了開發者的開發效率。之前有些要通過為一個個子元素添加class，或者js實現才能實現的效果。現在可以很方便的用選擇器實現。
這些新的樣式已被現代瀏覽器及IE9以上支持。
| 選擇器 | 說明 |
| :first-child | 第一個子元素 |
| :last-child | 最后一個子元素 |
| :nth-child(3) | 第三個子元素 |
| :nth-last-child(3) | 倒數第三個子元素 |
| :nth-child(odd) | 所有奇數個子元素 |
| :nth-child(even) | 所有偶數個子元素 |
| div h2:nth-of-type(even) | div 中所有的h2元素中，所有的偶數元素(只針對同類型子元素計算) |
| :nth-last-of-type | 反過來計算 |
| li:nth-child(4n+1) | 循環樣式 匹配第1，5，9...個li |
| li:nth-child(4n+2) | 循環樣式 匹配第2，6，10...個li |
| li:nth-child(4n+4) | 可簡寫為 li:nth-child(4n) |
| ul li:first-child:last-child | 是第一個也是最后一個，即匹配ul中只有一個li. |
| :only-child | 上面的簡寫形式。匹配某個父元素只有一個子元素 |
h2:nth-child(3) 與 h2:nth-of-type(3) 的區別？
h2:nth-child(3) 指 第三個子元素中正好是h2則應用該樣式
h2:nth-of-type(3) 指所有的h2子元素的合集中，對第三個h2應用該樣式
<style type="text/css"> h2:nth-child(3){ background-color:green; } h2:nth-of-type(3){ background-color:#e00; } </style> </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>
結果：
循環樣式的使用區別？
<style type="text/css">
/*對第1，5，9個li標簽應用樣式*/
li:nth-child(4n+1) { background-color: yellow; }
/*對第2，6，10個li標簽應用樣式*/
li:nth-child(4n+2) { background-color: limegreen; } li:nth-child(4n+3) { background-color: red; } li:nth-child(4n) { background-color: #999; } </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>
效果：
:nth-child(1) 等價於 :first-child
:nth-last-child(1) 等價於 :last-child
:first-child:last-child 等價於 :only-child