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

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

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

第一到第六的td : td:nth-child(n+1):nth-child(-n+6)
css 复制代码
td:nth-child(n+1):nth-child(-n+6)
第二到第八的a : a:nth-child(n+2):nth-child(-n+8)
css 复制代码
a:nth-child(n+2):nth-child(-n+8)
1等效0n+1 , 7等效0n+7 , 没有负数,不能倒数
第一个a : (1)(0n+1)
css 复制代码
a:nth-child(1)
css 复制代码
a:nth-child(0n+1)
第七个a : (7)(0n+7)
css 复制代码
a:nth-child(7)
css 复制代码
a:nth-child(0n+7)

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

第三个及之后的a : (n+3)
css 复制代码
a:nth-child(n+3)
前七个a, 第七个及之前的a : (-n+7)
css 复制代码
a:nth-child(-n+7)
第三到第七之间的a : a:nth-child(n+3):nth-child(-n+7)
css 复制代码
a:nth-child(n+3):nth-child(-n+7)
奇数行 : tr:nth-child(2n+1)tr:nth-child(odd)
css 复制代码
tr:nth-child(2n+1)
css 复制代码
tr:nth-child(odd)
偶数行 : tr:nth-child(2n)tr:nth-child(even)
css 复制代码
tr:nth-child(2n)
css 复制代码
tr:nth-child(even)
第2,12,22,32,42,52... 以10个递增 : 10n+2
css 复制代码
:nth-child(10n+2)
第52个及之前: 2,12,22,32,42,52... 以10个递减 : -10n+52
css 复制代码
: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> 元素的元素。

相关推荐
疯狂动物城在逃flash4 分钟前
数据库入门:SQL学习路线图与实战技巧
前端
前端小巷子10 分钟前
跨域问题解决方案:开发代理
前端·javascript·面试
前端_逍遥生10 分钟前
Chrome 插件开发到发布完整指南:从零开始打造 TTS 朗读助手
前端·chrome
Mintopia11 分钟前
Three.js 材质与灯光:一场像素级的光影华尔兹
前端·javascript·three.js
天涯学馆12 分钟前
JavaScript 跨域、事件循环、性能优化面试题解析教程
前端·javascript·面试
掘金一周21 分钟前
别再用 100vh 了!移动端视口高度的终极解决方案| 掘金一周7.3
前端·后端
晴殇i23 分钟前
CSS 迎来重大升级:Chrome 137 支持 if () 条件函数,样式逻辑从此更灵活
前端·css·面试
咚咚咚ddd25 分钟前
cursor mcp实践:网站落地页性能检测报告(browser-tools)
前端
MiyueFE26 分钟前
让我害怕的 TypeScript 类型 — — 直到我学会了这 3 条规则
前端·typescript
Hilaku26 分钟前
2025年,每个前端都应该了解的CSS选择器:`:has()`, `:is()`, `:where()`
前端·css