【CSS】常用的CSS元素伪类选择器以及示例

CSS元素选择器:

选择器	示例说明
:first-child	选择某个元素的第一个子元素（IE6不支持）
:last-child	选择某个元素的最后一个子元素
:nth-child()	[CSS3]选择某个元素的一个或多个特定的子元素（IE6-8不支持）
:nth-last-child()	[CSS3]选择某个元素的一个或多个特定的子元素，从这个元素的最后一个子元素开始算（IE6-8不支持）
:first-of-type	[CSS3]选择一个上级元素下的第一个同类子元素
:last-of-type	[CSS3]选择一个上级元素的最后一个同类子元素
:only-child	[CSS3]选择的元素是它的父元素的唯一一个了元素（IE6-8不支持）
:only-of-type	[CSS3]选择一个元素是它的上级元素的唯一一个相同类型的子元素（IE6-8不支持）
:nth-of-type()	[CSS3]选择指定的元素（IE6-8不支持）
:nth-last-of-type()	[CSS3]选择指定的元素，从元素的最后一个开始计算（IE6-8不支持）

下面举例一下 :first-child、 :last-child 、:nth-child() 、 :nth-last-child() 的使用方法。
示例共用代码：
css:

.list{
    text-align: center;
    margin-top: 100px;
}
.item{
    width: 50px;
    height: 50px;
    line-height: 50px;
    display: inline-block;
    margin: 0 4px;
    background: #ccc;
    color: #fff;
}

元素块：

<div class="list">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
    <div class="item">5</div>
</div>

得到如图：

---

1、:first-child和:last-child举例：

    .item:first-child{
        background: red;
    }
    .item:last-child{
        background: blue;
    }

得到如图：

2、:nth-child()举例：

（1）选择第n个元素。这里的n是指同一个父级下第几个元素，从1开始数。

.item:nth-child(2){
     background: red;
 }

得到如图：

（2）元素排序的奇偶数。odd是奇数（1、3、5、…），even是偶数（2、4、6、…）。

.item:nth-child(odd){
 	background: red;
}
.item:nth-child(even){
    background: blue;
}

得到如图：

（3）使用公式。例如（an+ b），描述：a代表一个循环的大小，N是一个计数器（从0开始），以及b是偏移量。 在这里，我们举例几个算法：

• 指定2的倍数给背景颜色：

.item:nth-child(2n+2){
    background: red;
}

得到如图：

• 指定前三位元素给背景颜色：

 .item:nth-child(-n+3){
    background: red;
}

得到如图：

• 指定第三位开始的元素给背景颜色：

 .item:nth-child(n+3){
    background: red;
}

得到如图：

3、 :nth-last-child()举例：

（1）选择倒数第n个元素。这里的n是指同一个父级下的倒数第几个元素。实现与上面的:nth-child()例子同理，就不多说了。

.item:nth-last-child(1){
    background: red;
}

得到如图：