css选择器nth-last-child(n)的学习理解

上一节我们介绍了:nth-child(n)的使用,这一节我们来介绍一下:nth-last-child(n)
:nth-last-child(n):此选择器和nth-child(n)类似都是选择其父元素的第 n 个子元素,唯一的区别在于它是从父元素的子元素末尾开始往前数,一直到第一个子元素。

css 复制代码
/*1:具体的数字:*/
li:nth-last-child(3){
/*选择父元素的倒数第三个子元素。
     这里的子元素的索引从1开始计算,当表达式的值为0或小于0的时候,不选择任何匹配的元素。*/
    background-color:#c00;
}

/*2: 表达式(5n)*/
li:nth-last-child(5n){
    /*表示n从0开始和前边的数字进行乘法运算,然后倒数进行选中计算结果的第几个子元素,
    例如 :nth-last-child(5n) 会选择父元素的 2*0即第 0 个但是这里的元素的索引是从 1 开始的所以没有匹配项, 
    5*1即倒数第5个、5*2 即倒数第10个、5*3 即倒数第15个...等,也可以理解为前边数字的倍数。*/
}
/*3:表达式(n+a) */
li:nth-last-child(n+5){
    /*这里的a 取值为大于等于 0 的整数。
    比如 n+5:表示倒数第5个及其之前的元素:(0+5)=5、(1+5)=6、(2+5)=7,等等一直到第一个元素。*/
}

/*4:表达式(-n+a) */
li:nth-last-child(-n+5){
    /*这里的a 取值为大于等于 0 的整数。
    比如 -n+5:表示最后5个元素被选中*/
}

/*5: 表达式:(an+b)*/

li:nth-last-child(2n+5){
    /*其中a的取值为:0、负整数数、正整数;
    b取值为:大于等于0的整数;
    2n+5 表示 2*0+5=5(倒数第5个)、 2*1+5=7 (倒数第7个)、 2*2+5=9(倒数第9个)、 2*3+5=11(倒数第11个)、.... 等子元素被选中,这离的选中是从后往前数
    */
}
li:nth-last-child(-2n+5){
    /*
    -2n+5 表示 -2*0+5=5(倒数第5个)、 -2*1+5=3(倒数第3个) 、 -2*2+5=1(倒数第1个)、.... 等子元素被选中,这里计算得到负数不选中任何元素
    */
}

/*6: 表达式:(an-b)*/
li:nth-last-child(4n-5){
    /*其中a的取值为:0、正整数;
    b取值为:大于等于0的整数;
    4n-5 表示 4*0-5=-5、 4*1-5=-1 、 4*2-5=3(倒数第3个)、 4*3-5=7(倒数第7个)、 4*4-5=11(倒数第11个)、.... 等子元素被选中
    */
}

/*7: 关键字 odd、 even*/
li:nth-last-child(odd){
    /*会选择所有奇数位置的子元素,和:nth-last-child(2n+1)效果一样
    1、3、5、7、9、.....
    */
}
li:nth-last-child(even){
    /*会选择所有偶数位置的子元素,和:nth-last-child(2n)效果一样
    2、4、6、8、10、.....
    */
}
相关推荐
DevUI团队6 分钟前
通过DeepSeek学CSS - Flex和Grid布局优缺点对比
前端·deepseek
这里有鱼汤7 分钟前
做量化没有实时数据怎么行?我找到一个超级好用的Python库,速度还贼快!
前端·后端·python
生信小鹏10 分钟前
Nature旗下 | npj Digital Medicine | 图像+转录组+临床变量三合一,多模态AI预测化疗反应,值得复现学习的完整框架
人工智能·学习·免疫治疗·scrna-seq·scrna
zhu128930355611 分钟前
基于Rust与WebAssembly实现高性能前端计算
前端·rust·wasm
耶啵奶膘11 分钟前
uni-app:firstUI框架的选择器Select改造,添加一个搜索的插槽
前端·uni-app
旧识君17 分钟前
前端图片压缩实战:基于compressorjs的高效解决方案
前端·javascript·vue.js
爱上大树的小猪23 分钟前
【前端安全】模板字符串动态拼接HTML的防XSS完全指南
前端·安全·html
这里有鱼汤41 分钟前
你以为 Socket 只能做聊天室?揭秘 Python 网络编程的 8 种硬核用法
前端·后端·python
uhakadotcom43 分钟前
Wolfram.com:解锁计算技术和知识管理的强大工具
前端·面试·github
skyseey1 小时前
笔记:Vue3+Vite 怎么导入静态资源,比如图片/组件
前端·javascript·笔记