上午在写一段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>
运行结果:
逻辑解释:
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; }
运行结果:
以上就是CSS3 选择倒数第几个元素的方法。因为梦中有你;为了你,为了梦一样的生活在我元旦放歌那一天得以实现——我要陪你一起看草原。更多关于CSS3 选择倒数第几个元素的方法请关注haodaima.com其它相关文章!