上午在写一段HTML时CSS样式时,需要对一个父元素下的最后两个子元素的样式进行额外的定义,由于以前没有遇到过类似的需求,就仔细得查了下网上相似的案例,发现可以使用 CSS3 中的 “:nth-last-child() ”选择器来实现此效果。

CSS3 :nth-last-child() 选择器

:nth-last-child(n):匹配其父元素下的每个子元素,不论元素的类型,从最后一个子元素开始计数,n 表示第几个元素。

PS:可能大家对上面的定义不是很好理解,不过可以通过下面的示例演示来理解。

例:CSS3 选择倒数第二个元素

html代码:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        /* 属于其父元素下的所有类型为 p 元素的子元素,但从最后一个子元素开始计数 */
        p:nth-last-child(2) {
            color: red;
        }
    </style>
</head>
<body>
    <h1>飞鸟慕鱼博客</h1>
    <p>这是一段文字</p>
    <p>这是一段文字</p>
    <p>这是一段文字</p>
    <p>这是一段文字</p>
    <p>这是一段文字</p>
    <p>这是一段文字</p>
    <p>这是一段文字</p>
    <p>这是一段文字</p>
    <p>这是一段文字</p>
    <p>这是一段文字</p>
    <p>这是一段文字</p>
</body>
</html>

运行结果:

CSS3选择倒数第几个元素的方法,CSS3选择元素,css倒数元素

逻辑解释:

1、定位 p 元素的父元素,也就是 body 元素

2、集合所有 body 下的 p 元素

3、从所有集合 p 元素中,查找倒数第二个元素

关于  :nth-last-child(n) 选择器中的计数n的值

 :nth-last-child(n) 选择器中的 n 参数,可以用数字,关键词或公式来表示

例1:用数字表示

/* 这里的2可以是任合数字,但都从最后一个开始计数 */
p:nth-last-child(2) {
    color:red;
}

例2:用关键词来表示

Odd 和 even 是可用于匹配下标是奇数或偶数的关键词(计数从1开始)。

/*
odd:表示奇数,也就是单数
even:表示偶数,也就是双数
*/        
p:nth-last-child(odd){
    color:#ff0000;
}
p:nth-last-child(even){
    color:#0000ff;
}

运行结果:

CSS3选择倒数第几个元素的方法,CSS3选择元素,css倒数元素

例3:使用表达式

可以使用公式 (an + b)来定位元素的位置。

/*
an + b:表示周期的长度,n 是计数器(从 0 开始),b是偏移值(可加,可减)。
*/
p:nth-last-child(3n+1){
    color:#ff0000;
}

运行结果:

CSS3选择倒数第几个元素的方法,CSS3选择元素,css倒数元素