CSS的伪类选择器:nth-child()的用法示例

news/2024/7/5 6:05:59
CSS的伪类选择器:nth-child()的用法示例

n可以+- , 右边数字只能+

第一到第六的td : td:nth-child(n+1):nth-child(-n+6)
td:nth-child(n+1):nth-child(-n+6)
第二到第八的a : a:nth-child(n+2):nth-child(-n+8)
a:nth-child(n+2):nth-child(-n+8)



1等效0n+1 , 7等效0n+7 , 没有负数,不能倒数
第一个a : (1)(0n+1)
a:nth-child(1)
a:nth-child(0n+1)
第七个a : (7)(0n+7)
a:nth-child(7)
a:nth-child(0n+7)

想"-1",“0n-1”,“-7”,"0n-7"从倒数开始是行不通的



第三个及之后的a : (n+3)
a:nth-child(n+3)
前七个a, 第七个及之前的a : (-n+7)
a:nth-child(-n+7)
第三到第七之间的a : a:nth-child(n+3):nth-child(-n+7)
a:nth-child(n+3):nth-child(-n+7)



奇数行 : tr:nth-child(2n+1)tr:nth-child(odd)
tr:nth-child(2n+1)
tr:nth-child(odd)
偶数行 : tr:nth-child(2n)tr:nth-child(even)
tr:nth-child(2n)
tr:nth-child(even)



第2,12,22,32,42,52… 以10个递增 : 10n+2
:nth-child(10n+2)
第52个及之前: 2,12,22,32,42,52… 以10个递减 : -10n+52
:nth-child(-10n+52)









MDN Web 开发技术 :nth-child()

选择器示例
tr:nth-child(odd) or tr:nth-child(2n+1)
表示 HTML 表格中的奇数行:1、3、5……。

tr:nth-child(even) or tr:nth-child(2n)
表示 HTML 表格中的偶数行:2、4、6……。

:nth-child(7)
表示第 7 个元素。

:nth-child(5n)
表示第 5、10、15……个元素。第一个匹配的元素是 0 [=5x0],但由于元素的索引是从 1 开始的而 n 从 0 开始,所以不会匹配任何元素。这乍一看可能有点奇怪,但是当公式中的 B 部分为 >0 的值时,就会变得更有意义,就像下面的示例一样。

:nth-child(n+7)
表示第七个及其之后的元素:7 [=0+7]、8 [=1+7]、9 [=2+7],等等。

:nth-child(3n+4)
表示第 4 [=(3×0)+4]、7 [=(3×1)+4]、10 [=(3×2)+4]、13 [=(3×3)+4]……个元素。

:nth-child(-n+3)
表示前三个元素。[=-0+3、-1+3、-2+3]

p:nth-child(n)
表示兄弟元素列表中的每个 <p> 元素。这与简单的 p 选择器选择的元素相同(尽管具有更高的优先级)。

p:nth-child(1) 或 p:nth-child(0n+1)
表示每一个兄弟元素列表中的第一个 <p> 元素。这与 :first-child 选择器相同(并且具有相同的优先级)。

p:nth-child(n+8)``:nth-child(-n+15)
表示兄弟元素列表中的第 8 到第 15 个,且为 <p> 元素的元素。














http://lihuaxi.xjx100.cn/news/2032198.html

相关文章

解决STM32MP157开发板密码登录问题

开发板密码登录问题是很多人遇到的问题&#xff0c;网上有很多帖子&#xff0c;我也参考过&#xff0c;不太适用&#xff0c;很复杂&#xff0c;甚至会被误导&#xff0c;我差点连ubuntu虚拟机都无法登录了。有的密码匹配&#xff0c;有的取消不了密码。 1、密码配置&#xff…

Day-02-01

内容管理模块项目开发 Swagger的使用 1. 导入依赖 <!-- Spring Boot 集成 swagger --> <dependency><groupId>com.spring4all</groupId><artifactId>swagger-spring-boot-starter</artifactId> </dependency> 2. 配置信息 # 在app…

Ubuntu 20.04 安装RVM

RVM是管理Ruby版本的工具,使用RVM可以在单机上方便地管理多个Ruby版本。 下载安装脚本 首先使下载安装脚本 wget https://raw.githubusercontent.com/rvm/rvm/master/binscripts/rvm-installer 如果出现了 Connection refused 的情况, 可以考虑执行以下命令修改dns,再执…

第三百四十九回

文章目录 1. 概念介绍2. 原理与方法2.1 知识对比2.2 使用方法 3. 示例代码4. 内容总结 我们在上一章回中介绍了"加密包crypto"相关的内容&#xff0c;本章回中将介绍characters包.闲话休提&#xff0c;让我们一起Talk Flutter吧。 1. 概念介绍 在项目中会遇到获取字…

突破编程_C++_面试(基本数据类型)

面试题1&#xff1a;在32位和64位系统上&#xff0c;int、short、long、long long 和 char 类型通常分别占用多少字节 在 32 位和 64 位系统上&#xff0c;int、short、long、long long 和 char 类型的大小可能会有所不同&#xff0c;这取决于编译器和操作系统。但按照常见的约…

Rocky Linux 下载安装

一、VMware Workstation下载安装 1、安装教程 VMware Workstation下载安装&#xff08;含密钥&#xff09; 二、VMware Workstation 创建虚拟机 1、创建教程 VMware Workstation 创建虚拟机 三、Rocky Linux 下载 1、下载官网 RockyLinux.org 2、选择X86架构_64位系统_DVD镜…

政安晨:【完全零基础】认知人工智能(一)【超级简单】的【机器学习神经网络】 —— 预测机

开个头 很多小伙伴们很想亲近人工智能与机器学习领域&#xff0c;然而这个领域里的核心理论、算法、工具给人感觉都太过“高冷”&#xff0c;让很多小伙伴们望而却步&#xff0c;导致一直无法入门。 如何捅破这层窗户纸&#xff1f; 让高冷的不再高冷&#xff0c;让神秘的不…

Java - SPI机制

本文参考&#xff1a;SPI机制 SPI&#xff08;Service Provider Interface&#xff09;&#xff0c;是JDK内置的一种服务提供发现机制&#xff0c;可以用来启动框架扩展和替换组件&#xff0c;主要是被框架的开发人员使用&#xff0c;比如 java.sql.Driver接口&#xff0c;其他…