CSS3常用选择器（二）

本文继续介绍css3新增的选择器。

1.选择器 first-child、last-child、nth-child 和 nth-last-child

利用这几个选择器能够针对一个父元素中的第一个子元素、最后一个子元素、指定序号的子元素，甚至第偶数个或第奇数个子元素进行样式的指定。

直接看代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>css3选择器</title>
    <style type="text/css">
        li:first-child{/*第一个子元素*/
            background-color: yellow;
        }
        li:last-child{/*最后一个子元素*/
            background-color: lightblue;
        }
        li:nth-child(3){/*从上往下数第三个子元素*/
            background-color: pink;
        }
        li:nth-last-child(2){/*从下往上数第二个子元素*/
            background-color: firebrick;
        }

    </style>
</head>
<body>
    <h2>列表</h2>
    <ul>
        <li>列表1</li>
        <li>列表2</li>
        <li>列表3</li>
        <li>列表4</li>
        <li>列表5</li>
        <li>列表6</li>
    </ul>
</body>
</html>

效果：

利用奇偶设置样式：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>css3选择器</title>
    <style type="text/css">
        li:nth-child(odd){/*奇数个元素*/
            background-color: pink;
        }
        li:nth-child(even){/*奇数个元素*/
            background-color: firebrick;
        }        
    </style>
</head>
<body>
    <h2>列表</h2>
    <ul>
        <li>列表1</li>
        <li>列表2</li>
        <li>列表3</li>
        <li>列表4</li>
        <li>列表5</li>
        <li>列表6</li>
    </ul>
</body>
</html>

效果：

如果多组样式重复，可以直接使用αn+β类型参数，不需要定义n循环：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>css3选择器</title>
    <style type="text/css">
        h2:nth-child(3n+1){
            background-color: pink;
        }    
        p:nth-child(3n+2){
            background-color: lightblue;
        }
        p:nth-child(3n){
            background-color: yellowgreen;
        }    
    </style>
</head>
<body>
    <h2>标题1</h2>
    <p>内容1</p>
    <p>内容11</p>
    <h2>标题2</h2>
    <p>内容2</p>
    <p>内容21</p>
    <h2>标题3</h2>
    <p>内容3</p>
    <p>内容31</p>
    <h2>标题4</h2>
    <p>内容4</p>
    <p>内容41</p>
</body>
</html>

效果：

2. nth-of-type 和 nth-last-of-type选择器

这两个选择器和刚刚的四个child选择器类似，但是有些情况下利用这两个选择器会避免一些问题发生，下面举例说明。

如下四个段落，我们希望设置标题一和三同色，二和四同色。

    <h2>标题1</h2>
    <p>内容1</p>
    <h2>标题2</h2>
    <p>内容2</p>
    <h2>标题3</h2>
    <p>内容3</p>
    <h2>标题4</h2>
    <p>内容4</p>

如果使用nth-child：

h2:nth-child(odd){
    background-color: pink;
}    
h2:nth-child(even){
    background-color: lightblue;
}

效果如下：

因为nth-child在计算子元素时将所有子元素都计算在内了，所以上面的代码中每一个h2都是第奇数个元素，而偶数个元素因为不是h2，所以样式不生效。

这种情况使用nth-of-type可以解决：

h2:nth-of-type(odd){
    background-color: pink;
}    
h2:nth-of-type(even){
    background-color: lightblue;
}

nth-of-type只计算父元素下的同类子元素。nth-last-of-type为从后向前数，不再赘述。

3.only-child选择器

使用only-child选择器可以代替使用 nth-child(1)：nth-last-child(1) 的实现方法。当只有一个子元素时，可以使用only-child选择器。