css3新增了許多偽類，但是IE8以及更低版本的IE瀏覽器不支持css3偽類，所以在使用時要是涉及到布局等意象全局的樣式，應該多考慮一下。
1.elem:nth-child(n)
這個偽類選中父元素下的第n個子元素，並且這個子元素的標簽名為elem，n可以接受具體的數值，也可以接受函數（如4n-1）。需要注意的是，n是從1開始計算，而不是0。
我們可以使用一個無序列表來測試：
<ul id="test">
<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>
</ul>
當n為具體的數值是選中第n個子元素，如：
#test li:nth-child(3){
background:#f00;
}
選中的是<li>3</li>：
當n為函數時，比如n的值為“3n+1”，就會選中第3*0+1=1，3*1+1=4……個元素，如：
#test li:nth-child(3n+1){
background:#f00;
}
選中的是如圖的元素：
當函數中的n系數為負時，甚至可以達到選擇前n個元素的效果，如：
#test li:nth-child(-n+3){
background:#f00;
}
選中的元素為：
當n為“odd”時，選中單數元素，當n為“even”時，選中雙數元素，如：
#test li:nth-child(even){
background:#f00;
}
選中的元素為：
2.elem:nth-last-child
和nth-child偽類一樣的思路，只是技術方式改為倒數計算，所以，我們可以選擇后n個元素，如：
#test li:nth-last-child(-n+3){
background:#f00;
}
選中的元素為：
3.elem:last-child
不言而喻，選中最后一個子元素。
4.elem:only-child
要是elem是父元素下唯一的子元素，這選中之，測試html代碼改為：
<ul class="test">
<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>
</ul>
<ul class="test">
<li>我是唯一的哦~</li>
</ul>
css代碼為：
.test li:only-child{
background:#f00;
}
則只會選中第二個列表，第一個列表沒有元素被選中：
5.elem:nth-of-type(n)
選擇父元素下第n個elem元素，n接受的格式和nth-child一樣。甚至在絕大多數情況下，nth-of-type的效果甚至和nth-child沒有區別，那這兩個偽類到底是什么區別呢。注意：
elem:nth-of-type(n)是“選擇父元素下第n個elem元素”。
而elem:nth-child(n)是“這個偽類選中父元素下的第n個子元素，並且這個子元素的標簽名為elem”。
接下來創建一個demo演示一下這兩者的區別：
比如有一下html代碼，在ul中混入一個<p>元素：
<ul class="test">
<li>1</li>
<li>2</li>
<li>3</li>
<p>強行插樓！！</p>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
</ul>
如果css代碼為：
.test li:nth-of-type(4){
background:#f00;
}
因為nth-of-type是“選擇父元素下第n個elem元素”，所以，會選中<li>4</li>元素，效果為：
那如果代碼是這樣呢：
.test li:nth-child(4){
background:#f00;
}
因為:nth-child(n)選擇的是“這個偽類選中父元素下的第n個子元素，並且這個子元素的標簽名為elem”，在本例中，父元素的第4個子元素是<p></p>，但該元素的標簽名並不是<li>，所以，這行代碼相當於什么都沒選中，也沒沒有效果了：
6.elem:first-of-type和elem:last-of-type
不言而喻，選中父元素下第1個/最后一個elem元素。
7.elem:only-of-type
如果父元素下的子元素只有一個elem元素，選中該元素。elem:only-of-type和elem:only-child不同的是，后者父元素下只能有一個子元素；而前者這不一定，只要父元素下只有一個elem標簽就行。
比如有html代碼：
<ul class="test">
<li>1</li>
<li>2</li>
<li>3</li>
<p>強行插樓！！</p>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
</ul>
有以下css代碼：
.test p:only-of-type{
background:#f00;
}
則會選中其中唯一的一個p標簽：
但假設html代碼為：
<ul class="test">
<li>1</li>
<li>2</li>
<li>3</li>
<p>強行插樓！！</p>
<p>再插一次！！</p>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
</ul>
因為p元素不唯一，這不會選擇任何元素。
8.elem:empty
選中不包含子元素和內容的elem標簽。