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

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

/*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、.....*/
}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/744620.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

多项式回归算法模拟

python3.6 环境 import numpy as np import matplotlib.pyplot as plt from sklearn.linear_model import LinearRegression from sklearn.preprocessing import PolynomialFeatures# 生成随机数作为x变量,范围在-5到5之间,共100个样本 x np.random.un…

深度学习训练GPU显卡选型攻略

‍‍🏡博客主页: virobotics(仪酷智能):LabVIEW深度学习、人工智能博主 📑上期文章:『仪酷LabVIEW OD实战(5)——Object DetectionTensorRT工具包快速实现yolo目标检测』 🍻本文由virobotics(仪酷智能)原创…

Web框架开发-web框架

一、web框架 web框架(web framwork)是一种开发框架,用来支持动态网站,网络应用和网络服务的开发。这大多数的web框架提供了一套开发和部署网站的方式,也为web行为提供了一套通用的方法。web框架已经实现了很多功能&…

51单片机的万年历闹钟及温度补偿

撰写一篇基于51单片机的万年历闹钟及温度补偿的论文,你需要按照学术论文的标准格式和结构来组织内容。以下是一个大致的论文框架和内容建议: 基于51单片机的万年历闹钟及温度补偿系统设计与实现 摘要: 简要介绍论文的研究背景、目的、方法、…

C++特性之一:继承

1. 派生类的成员变量、成员函数、构造、析构 2. 继承的切片 3. 重定义/隐藏 重定义/隐藏:派生类和基类有同名的成员,就叫隐藏。派生类的成员隐藏了基类的成员。 隐藏时可以通过类作用限定符来访问被隐藏的成员。 class Person { public:void Print(){…

代码学习记录19

随想录日记part19 t i m e : time: time: 2024.03.14 主要内容:今天的主要内容是二叉树的第七部分,主要涉及修剪二叉搜索树 ;将有序数组转换为二叉搜索树;把二叉搜索树转换为累加树。 669. 修剪…

【UE5】非持枪状态蹲姿移动的动画混合空间

项目资源文末百度网盘自取 在BlendSpace文件夹中单击右键选择动画(Animation)中的混合空间(Blend Space) ,选择SK_Female_Skeleton,命名为BS_NormalCrouch 打开BS_NormalCrouch 水平轴表示角色的方向,命名为Direction,方向的最…

原生php单元测试示例

下载phpunit.phar https://phpunit.de/getting-started/phpunit-9.html 官网 然后win点击这里下载 新建目录 这里目录可以作为参考&#xff0c;然后放在根目录下 新建一个示例类 <?phpdeclare(strict_types1);namespace Hjj\DesignPatterns\Creational\Hello;class He…

如何实现系统的高可用性

实现系统的高可用性是确保系统持续提供服务的关键要素。下面是一些常见的高可用方案&#xff1a; 冗余部署&#xff1a;将系统的关键组件部署在多台服务器上&#xff0c;通过搭建主备或者集群的架构来实现冗余。当主服务器出现故障时&#xff0c;备用服务器能够自动接管&#…

Flutter可重排的列表控件ReorderableListView详解

文章目录 ReorderableListView 介绍主要属性使用示例注意事项 ReorderableListView 介绍 ReorderableListView 是 Flutter 中一个可重排的列表控件&#xff0c;允许用户通过拖动来改变列表项的顺序。它继承自 ListView&#xff0c;并提供了一些额外的功能来实现重排功能。 主…

面试 Java 并发编程八股文十问十答第六期

面试 Java 并发编程八股文十问十答第六期 作者&#xff1a;程序员小白条&#xff0c;个人博客 相信看了本文后&#xff0c;对你的面试是有一定帮助的&#xff01;关注专栏后就能收到持续更新&#xff01; ⭐点赞⭐收藏⭐不迷路&#xff01;⭐ 1&#xff09;synchronized 和 R…

安卓通过termux部署ChatGLM

一、安装Termux并进行相关配置 1、安装termux Termux 是一个 Android 终端仿真应用程序&#xff0c;用于在 Android 手机上搭建一个完整的 Linux 环境。 不需要 root 权限 Termux 就可以正常运行。Termux 基本实现 Linux 下的许多基本操作。可以使用 Termux 安装 python&…

23.查询所有列

选择所有列 SELECT * FROM 表名; 用跟在SELECT关键字后面的星号(*),你能够显示表中数据的所有列。 实例&#xff1a; 查询departments表中的所有数据 select * from departments; 选择指定列 select 列名1,列名2... from 表名; 能够用SELECT语句显示表的指定列&#xf…

DB算法原理与构建

参考&#xff1a; https://aistudio.baidu.com/projectdetail/4483048 Real-Time Scene Text Detection with Differentiable Binarization 如何读论文-by 李沐 DB (Real-Time Scene Text Detection with Differentiable Binarization) 原理 DB是一个基于分割的文本检测算…

区块链基础知识(上):区块链基本原理、加密哈希、公钥加密

目录 基本原理 加密哈希&#xff1a; 公钥加密&#xff1a; 希望有人向你发送只有你才能打开的加密文档/消息时使用 PKC 希望向其他人发送加密文档/消息并证明它确实由你发送时使用 PKC 使用 PKC 和加密哈希对文档/消息进行数字签名 交易哈希链使用数字签名转让数字资产所…

SenseNova 商汤日日新大模型 Function Call(函数调用)功能讲解和应用示例

考虑到使用 magic 申请 OpenAPI 的账号挺麻烦的&#xff0c;这里以商汤日日新大模型 SenseNova 介绍 Function Call 的功能。 官方链接&#xff1a;日日新开放平台 一、Function Call 是个啥&#xff1f; 在 LLM&#xff08;Large Language Model&#xff09; 语言大模型时代&…

[论文笔记]DouZero: Mastering DouDizhu with Self-Play Deep Reinforcement Learning

引言 今天带来21年一篇关于用强化学习玩斗地主的论文:DouZero: Mastering DouDizhu with Self-Play Deep Reinforcement Learning。 斗地主是一个具有竞争、合作、信息不完全、状态空间庞大以及大量可能动作的极具挑战性的领域,尤其是合法动作在每一轮中变化显著。在这项工…

SpringBoot 过滤器和拦截器的区别

SpringBoot 过滤器和拦截器的区别 SpringBoot 中的过滤器&#xff08;Filter&#xff09;和拦截器&#xff08;Interceptor&#xff09;都可以在请求处理的不同阶段执行特定的操作&#xff0c;但它们之间存在一些关键的区别&#xff1a; 1. 执行层级 过滤器&#xff08;Filt…

YOLOv9实例分割教程|(二)验证教程

专栏地址&#xff1a;目前售价售价59.9&#xff0c;改进点30个 专栏介绍&#xff1a;YOLOv9改进系列 | 包含深度学习最新创新&#xff0c;助力高效涨点&#xff01;&#xff01;&#xff01; 一、验证 打开分割验证文件&#xff0c;填入数据集配置文件、训练好的权重文件&…

报告合集 |2023年,5份必读的“数字孪生”行业报告合集(文末下载)

数字孪生正在快速改变多个行业的面貌。它通过创建物理世界对象的虚拟复制&#xff0c;使得数据分析和系统优化能够在数字空间中实现&#xff0c;正在制造业、城市规划、医疗保健等国家支柱行业展现出巨大的变革力量&#xff0c;为行业的智能决策和预测提供了强大的支撑。 作为…