2、:nth-child(n) 选择器 匹配属于其父元素的第 N 个子元素,不论元素的类型。 n 可以是数字、关键词或公式。 数字:最常见的使用方式,eg: :nth-child(1) 关键词: Odd 和 even 是可用于匹配下标是奇数或偶数的子元素的关键词(第一个子元素的下标是 1)。 公式: 使用公式 (an + b)。描述:表示周期的...
nth-child用法 :nth-child是CSS伪类选择器之一,用于选择元素在其父元素中的索引位置为特定值的子元素。 具体用法如下: :nth-child(n)选择其父元素的第n个子元素,无论其类型是什么。 :nth-child(odd)选择其父元素中位置为奇数的子元素。 :nth-child(even)选择其父元素中位置为偶数的子元素。 :nth-child(n...
:nth-child() :nth-child() 选择器,该选择器选取父元素的第 N 个子元素,与类型无关。 一、选择列表中的偶数标签:nth-child(2n) 二、选择列表中的奇数标签 :nth-child(2n-1) 三、选择从第6个开始的,直到最后:nth-child(n+6) 四、选择第1个到第6个 :nth-child(-n+6) 五、两者结合使用,可以限制...
nth-last-child(3n)nth-last-child(3n):选择第 3、6、. . . 个元素,选择三的倍数。 举例:第3、6、 . . . 三的倍数行背景色设置为橙色,代码如下: 代码语言:javascript 复制 li:nth-child(3n){background:orange;} nth-last-child(3n+1)nth-last-child(3n+1):选择第 1、4、7 个元素,从第一个...
等同于:nth-child(1)。 6. last-child:父元素下的最后一个子元素,如果最后一个子元素不是该类型,选择不到。 二、nth-of-type() 匹配属于父元素的特定类型的第n个子元素,忽略不是该类型的元素。 参考:css选择器 nth-child
定义和用法 语法::nth-child(n) 说明::nth-child() 是CSS3的一个伪类选择器,匹配父元素中的第 n 个子元素,元素类型没有限制。 n可以是一个数字,一个关键字,或者一个公式。 下面用案例来说明各个常见的情况用法 原始效果demo <liv-for="item in listData">{{item.pname}}{{item.type}}{{item.LJTZJ...
nth-child作用 nth-child(n) 选择器匹配属于其父元素的第 n 个子元素。 注意:1. 第n个子元素的计数是从1开始,不是从0开始的2.选择表达式中的字母n...
:nth-child是CSS3提供的一个好用的选择器,因为在项目中经常用到,所以简单总结了它的常用方法,下面示例代码截图用的是同一个例子,p元素的父元素都是body p:nth-child(2) 表示给第2个p元素添加背景色,p:nth-child(3)是第3个p元素,以此类推 p:nth-child(2) ...
使用CSS选择器:nth-child()，能轻松修改特定子元素的样式。该选择器不考虑子元素的类型，直接选取父元素的第N个子元素。要修改父元素的前三个子元素的样式？简单，使用:nth-child(1n)即可。若需选择列表中的偶数标签，可以使用:nth-child(2n)；而要选择奇数标签，则是:nth-child(2n-1)。若需从第...
首先，选择器有几种基本形式，包括选择第一项、第N项和最后一项。使用:first-child可选取列表中的第一个元素，例如：first-child。通过:nth-child(n)可选取列表中的第n个元素，其中n是具体的数字。例如：nth-child(2)选取第二项。利用:last-child可选取列表的最后一个元素，例如：last-child。接...