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标签。