CSS3选择器nth-child,nth-last-child,nth-last-of-type,nth-of-type,last-of-type,last-child
2017-05-07 20:13

nth-child前言

nth-child的选择器是css3的新增的子元素选择器,与其类似的有nth-last-child,nth-last-of-type,nth-of-type,last-of-type,last-child等,通过这些选择器,我们可以方便的对特定的子元素设置特定的样式,比如隔行变色等,减去了不少js的操作。这类CSS3的选择器,兼容到IE9,拥有良好的兼容性,可以在现代WEB项目中放心使用。

nth-child

nth-child是一个css伪类,它的语法是:nth-child(an+b),其中的a,b为整数,n为(0,1,2,3,4,5,6,7,.....)。

nth-child(2n),选取的子元素结果为2,4,6,8等子元素,和关键字even相等,也可以写成nth-child(even)。

nth-child(2n+1),匹配1,3,5,7,9,....等子元素,和关键字odd相等,也可以写成nth-child(odd)。

nth-child(4),匹配第四个子元素。

<div class="nth-cont">
    <ul class="nth-ul">
        <li>
            mooshine
        </li>
        <li>
            平行线
        </li>
        <li>
            web前端
        </li>
        <li>
            java开发
        </li>
        <li>
            Just to do it
        </li>
        <li>
            妹纸前端
        </li>
    </ul>
</div>

有这么个列表,我们设置如下的nth伪类样式

.nth-ul li:nth-child(2n){
    background:#07A725;
}
 .nth-ul li:nth-child(2n-1){
     background:#1D78B7;
 }
 .nth-ul li:nth-child(4){
     background:#8e44ad;
 }

效果如下:

blob.png

nth-child(2n)是绿色的,nth-child(2n+1)是蓝色,nth-child(4)是紫色。

nth-last-child

nth-last-child也是一个伪类,其参数和nth-child一样,nth-last-child(an+b),它唯一和nth-child不同的是,它是从后往前数的。

还是上面的列表,我们用nth-last-child设置样式

.nth-ul li:nth-last-child(2n){
    background:#07A725;
}
 .nth-ul li:nth-last-child(2n-1){
     background:#1D78B7;
 }
 .nth-ul li:nth-last-child(4){
     background:#8e44ad;
 }

效果如下:

blob.png

可以看出,从下往上数奇数是蓝色,偶数是绿色,第四个是紫色。

nth-of-type

nth-of-type同样是一个伪类元素,它的参数跟nth-child一样nth-of-type(an+b),它与nth-child的区别是,nth-of-type是匹配选择同名元素子元素的。

<div class="nth-cont">
    <p class="context">mooshine</p>
    <p class="context">平行线</p>
    <p class="context"> web前端</p>
    <p class="context">CSS学习</p>
    <div class="context">java开发</div>
    <div class="context">Just to do it</div>
    <div class="context">妹纸前端</div>
</div>

现在,我们有这么一段html,然后我们使用nth-of-type来设置其样式。

.nth-cont *{
    line-height:42px;
    color:#9B0505;
    margin:0;
    padding:0;
}
.context:nth-of-type(2n){
    background:#07A725;
}
.context:nth-of-type(2n-1){
    background:#1D78B7;
}
.context:nth-of-type(3){
    background:#8e44ad;
}

效果如下:

blob.png

因为上半段是p标签,下半段是div标签,所以从遇到div标签的时候nth-of-type会重新计算,所有nth-of-type(3)会有两个紫色。

nth-of-type在子元素都是相同元素时,是和nth-child一样的效果的。

nth-last-of-type

nth-last-of-type和nth-of-type的关系,与nth-last-child和nth-child的关系一致。nth-last-of-type也是选择同标签名的元素,不过是从后往前数的。

还是上面的html结构,我们换成nth-last-of-type,

.nth-cont *{
    line-height:42px;
    color:#9B0505;
    margin:0;
    padding:0;
}
.context:nth-last-of-type(2n){
    background:#07A725;
}
.context:nth-last-of-type(2n-1){
    background:#1D78B7;
}
.context:nth-last-of-type(3){
    background:#8e44ad;
}

效果如下:

blob.png

nth-last-of-type还是分成p标签和div标签进行计数的,div从下往上第三个是个紫色,p标签从下往上第三个是紫色。

last-child

last-child这个伪类比较简单,就是指最后一个子元素。

.context:last-child{
    background:#f1c40f;
}

效果如下:

blob.png

只有对最后一个子元素起到了作用。

last-of-type

last-of-type是跟nth-of-type,nth-last-of-type同一类的,表示选择同标签的元素,也是只选择同一个标签名称的元素

.context:last-of-type{
    background:#f1c40f;
}

效果如下:

blob.png

last-of-type渲染了最后一个p标签,并且渲染了最后一个div标签。

first-child

first-child伪类是和last-child伪类相反,取第一个子元素。

.context:first-child{
    background:#f1c40f;
}

效果如下:

blob.png

first-of-type

first-of-type和last-of-type相反,选取同名称的元素的第一个子元素

.context:first-of-type{
    background:#f1c40f;
}

效果如下:

blob.png

p标签的第一个元素,和div标签的第一个元素都渲染了黄色的背景。

only-child

only-child表示在父元素中有且只有一个子元素的时候,才选中这个子元素。

<div class="nth-cont">
    <p class="context">mooshine</p>
    <p class="context">平行线</p>
    <p class="context"> web前端</p>
    <p class="context">CSS学习</p>
</div>
<div class="nth-cont">
    <p class="context">mooshine</p>
</div>

我们有这么一段html代码,然后设置only-child伪类

.context:only-child{
    background:#f1c40f;
}

效果如下:

blob.png

第二个div容器中的子元素渲染了黄色背景,因为其只有一个子元素。

only-of-type

only-of-type表示在父元素中只有一个这个标签名的元素时,选中这个元素,

我们有这么一段html代码

<div class="nth-cont">
    <p class="context">mooshine</p>
    <div class="context">平行线</div>
    <p class="context"> web前端</p>
    <p class="context">CSS学习</p>
    <dt class="context">mooshine</dt>
</div>

上面代码中在父元素中只有div,dt标签是只有一个的标签,我们设置only-of-type样式

.context:only-of-type{
    background:#f1c40f;
}

效果如下:

blob.png

只有标签名唯一的子元素被选中渲染了黄色背景。

nth-child总结

本文介绍列取了跟nth-child相关的所有子元素选择器伪类,放大一起更有助于大家的学习和理解,如果有遗漏的,可以在评论区发表你的看法。这些子元素选择样式的兼容性都是IE9+,可以方便的应用到我们的web项目中去,对于页面样式来说,是一大助力。

原创文章,转载请注明来自:妹纸前端-www.webfront-js.com.
阅读(1056)
辛苦了,打赏喝个咖啡
微信
支付宝
妹纸前端
妹纸前端工作室 | 文章不断更新中
京ICP备16005385号-1