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;
}
得到如图: