| :first-child |
選擇某個元素的第一個子元素（IE6不支持） |
| :last-child |
選擇某個元素的最后一個子元素 |
| :first-of-type |
[CSS3]選擇一個上級元素下的第一個同類子元素 |
| :last-of-type |
[CSS3]選擇一個上級元素的最后一個同類子元素 |
| :only-child |
[CSS3]選擇的元素是它的父元素的唯一一個了元素（IE6-8不支持） |
| :only-of-type |
[CSS3]選擇一個元素是它的上級元素的唯一一個相同類型的子元素（IE6-8不支持） |
| :nth-child() |
[CSS3]選擇某個元素的一個或多個特定的子元素（IE6-8不支持） |
| :nth-last-child() |
[CSS3]選擇某個元素的一個或多個特定的子元素，從這個元素的最后一個子元素開始算（IE6-8不支持） |
| :nth-of-type() |
[CSS3]選擇指定的元素（IE6-8不支持） |
| :nth-last-of-type() |
[CSS3]選擇指定的元素，從元素的最后一個開始計算（IE6-8不支持） |
下面用例子來說明以上偽類的用法。
1.1 first、last和only偽類選擇器
| <body>
<p>（$1）這個段落是其父元素（body）的首個子元素。</p>
<h1>歡迎訪問nDos的博客</h1> <p>（$2）這個段落不是其父元素的首個子元素，也不是其父元素的最后一個子元素。</p>
<div> <p>（$3）這個段落是其父元素（div）的首個子元素。</p> <p>（$4）這個段落是其父元素（div）的最后一個子元素。</p> </div>
<nav> <ul>（$4）這個是ul元素，是父元素（nav）的首個子元素。。</ul> <p>（$5）這個段落是其父元素（nav）的段落子元素中的首個子元素。</p> <p>（$6）這個段落是其父元素（nav）的段落子元素中的最后一個子元素。</p> <ul>（$7）這個是ul元素，是父元素（nav）的最后一個子元素。。</ul> </nav>
<div> <p>（$8）這個段落是其父元素（div）的唯一一個子元素。</p> </div>
<nav> <span>這個span也是父元素（nav）的一個子元素</span> <p>（$9）這個段落不是其父元素（nav）的唯一一個子元素。</p> </nav>
<p>（$10）這個段落是其父元素（body）的最后一個子元素。</p> </body> |
p:first-child { background:red; } 原理：首先p會篩選出頁面所有的<p>標簽，:first-child再從這些<p>標簽中選中是其父元素的首個子元素的<p>標簽，應用{ background:red; }這個樣式。對於上面的例子，則會給$1、$3和$8添加紅色的背景色。
p:last-child { background:yellow; } 流程是一樣的，對於上面的例子則會給$4、$8、$9和$10添加黃色的背景色。
p:first-of-type { background:red; } 與:first-child比較，除了在$1、$3和$8添加紅色的背景色外，$5和$9也將會被添加紅色的背景色。原理：首先p會篩選出頁面所有的<p>標簽，:first-of-type再從這些<p>標簽中選中排在第一位的<p>標簽。通俗的講，:first-of-type很強勢，只要某個標簽（比如div標簽）內含有<p>標簽，它不管怎么樣都會選擇一個，選擇的這個<p>標簽是div標簽中第一個出現的。
p:last-of-type { background:yellow; } 流程是一樣的，對於上面的例子則會給$4、$6、$8、$9和$10添加黃色的背景色。
p:only-child { background:red; } 原理：首先p會篩選出頁面所有的<p>標簽，然后一一確認這些<p>標簽哪些沒有任何的兄弟元素。對於上面的例子$8是沒有任何的兄弟的元素的，因此會被添加紅色的背景色。
p:only-of-type { background:red; } 與:only-child比較，除了$8以外，$9也會被添加紅色的背景色。原理就不做講解了，參照:first-of-type。
不帶參數的偽類都介紹完了，下面介紹表格中帶參數的4個偽類。
1.2 nth偽類選擇器
| <!DOCTYPE html> <html><head> <style> p { width:50px;float:left;text-align:center;border:1px solid gray; } </style> </head> <body> <h1>nDos的個人博客</h1> <p>$1</p><p>$2</p><p>$3</p><p>$4</p><p>$5</p> <p>$6</p><p>$7</p><p>$8</p><p>$9</p><p>$10</p> </body></html> |
上述例子在頁面中顯示的效果如下圖：
先看看偽類添加之后，會產生什么樣的效果。比如下述nth偽類：
p:nth-child(odd) { background:red; } 加入之后效果如下圖所示（odd是奇數的意思）：
有意思的事情發生了，為什么不是奇數的段落背景色為紅色呢？先放下這個問題，再來看看下面這個偽類：p:nth-of-type(odd) { background:red; }，顯示效果如下圖所示：
原理（上例）：nth-child是計算body中所有的子元素（包括h1），然后按照奇偶進行排列，那么“第一個”p標簽的順序標號成為了“2”。而nth-of-type則不同，它是計算body中所有的標簽為p的子元素，其他的子元素它不管，然后按照奇偶進行排列。
至於:nth-last-child()和:nth-last-of-type()原理也是一樣的，不過它計算的方式，是倒序的。關於這兩個偽類就不多展開了。
雖然不展開:nth-last-child()和:nth-last-of-type()，但是nth-child還有東西需要展示一下，比如這個偽類p:nth-child(2n+1) { background:red; }，顯示效果與p:nth-child(odd) { background:red; }是一模一樣的，這里就不貼圖了。
其中需要說的是這個n，寫成2i+1，行不行？不行！瀏覽器認不出來，瀏覽器只認識n。當然這是規則，就不深究了，下面要繼續討論的是，它只能進行奇偶選擇嗎？再來看看這個偽類：
p:nth-child(3n+1) { background:red; } 渲染的結果如下圖所示：
因為有h1這個標簽在，所以這里計算起來有點不太好理解，下面去掉h1那個標簽。看看下圖：
原理：n是從0開始取值，逐個代入。3n+1的結果就是 1、4、7、10、13……當然例子這里沒有那么多元素。當然也可以試試：p:nth-child(5n+1) { background:red; } 等等。
甚至可以試試下面這些偽類：
p:nth-child(-n+5) { background:red; }
p:nth-child(n+5) { background:red; }
p:nth-child(n) { background:red; }
對於nth-of-type、nth-last-child和nth-last-of-type的玩法也脫離不了上面的這些東西，只不過是計算的元素標簽的集合不同，計算的開始位置不同。寫再多也是重復，就不展開了。