css3之新增僞類

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標籤。