html中怎样选择第几个元素,CSS3 选择倒数第几个元素的方法

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

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

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

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

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

html代码：html>

Document

/* 属于其父元素下的所有类型为 p 元素的子元素，但从最后一个子元素开始计数 */

p:nth-last-child(2) {

color: red;

}

飞鸟慕鱼博客

这是一段文字

这是一段文字

这是一段文字

这是一段文字

这是一段文字

这是一段文字

这是一段文字

这是一段文字

这是一段文字

这是一段文字

这是一段文字

运行结果：

逻辑解释：

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;

}

运行结果：

例3：使用表达式

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

an + b：表示周期的长度，n 是计数器(从 0 开始)，b是偏移值(可加，可减)。

*/

p:nth-last-child(3n+1){

color:#ff0000;

}

运行结果：