CSS3——:nth-child选择器基本用法简述

发布网友发布时间：2024-09-17 06:32

共1个回答

热心网友时间：2024-09-28 04:48

注：n 是从1开始的

:nth-child 是 CSS3 提供的一个实用的选择器，它常用于项目中，以下是对其常用方法的简要介绍。示例代码中使用的例子相同，p 元素的父元素都是 body

p:nth-child(2)

这个选择器表示为第2个 p 元素添加背景色，p:nth-child(3)则指第3个 p 元素，以此类推

以上述示例为承接，如果这里的 p 元素前面还有其他元素，结果如下所示，段落1被添加背景色，而不是示例中的段落2

因为这里的 p:nth-child(1) 指的是 h1 元素，所以 p:nth-child(2) 才是 p 元素

p:nth-child(3n)

表示为3的倍数的 p 元素添加背景色，2n表示2的倍数，4n表示4的倍数，依此类推

p:nth-child(odd)

表示为所有奇数 p 元素添加背景色

p:nth-child(even)

表示为所有偶数 p 元素添加背景色

使用公式 (an + b) 描述：表示周期的长度，n 是计数器（从 0 开始），b 是偏移值。特别注意的是，an 必须写在 b 的前面，不能写成 b+an 的形式。注：公式里的 n，不区分大小写

p:nth-child(2n+1)

可以简单理解为等同于 p:nth-child(odd)

p:nth-child(2n+0) 可以简单理解为等同于 p:nth-child(even)

p:nth-child(n+2) 表示正向范围，从第2个 p 元素开始（包括第2个 p 元素）到最后一个 p 元素都添加背景色（这里范围指2-5）

p:nth-child(-n+5) 表示负向范围，从最后一个 p 元素（包括最后一个元素）到第一个 p 元素都添加背景色（这里范围指5-1）