nthchild的用法 nth-child()是css3中新增的伪类选择器,可以根据位置来对元素进行筛选,可以替代CSS2中的first-child和last-child,用法如下: 1、nth-child()接受一个参数,可以是一个正整数、负整数、奇数、偶数、关键字even或odd,也可以是an+b形式的表达式,分别代表不同的意思。 2、正整数:nth-child(4)表示...
li:first-child {color: red; } 选择最后一个元素:使用:last-child选择器。例如,选择最后一个元素并将其字体颜色设置为绿色: li:last-child {color: green; } 选择第n个元素:使用:nth-child(n)。例如,选择第三个元素并将其字体颜色设置为蓝色: li:nth-child(3) {color: blue; } ...
nth-child的用法 1、:nth-child(2)选取第几个标签,“2可以是你想要的数字” 2、:nth-child(n+4)选取大于等于4标签,“n”表示从整数,下同 3、:nth-child(-n+4)选取小于等于4标签 4、:nth-child(2n-1)选取奇数标签,2n-1可以是odd 5、:nth-child(2n)选取偶数标签,2n可以是even 6、:nth-child(3n+...
1.设置单双行 代码语言:javascript 复制 ul li:nth-child(odd){background-color:green;}/*设置单行样式*/ul li:nth-child(even){background-color:gray}/*设置双行样式*/ 2.设置每隔3个应用样式 代码语言:javascript 复制 ul li:nth-child(3n){background-color:green;}/* 3,6,9,12... */ 3.指定...
常用的用法包括: 1、div:nth-child(odd)或div:nth-child(2n+1)表示奇数行div:1,3,5等。 2、div:nth-child(even)或div:nth-child(2n)表示偶数行div:2,4,6等。 3、div:nth-child(7)表示第七个div元素。 4、div:nth-child(5n)表示每五个div元素中的一个:5,10,15等。 5、div:nth-child(3n+4...
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(n) 说明::nth-child() 是CSS3的一个伪类选择器,匹配父元素中的第 n 个子元素,元素类型没有限制。 n可以是一个数字,一个关键字,或者一个公式。 下面用案例来说明各个常见的情况用法 原始效果demo <liv-for="item in listData">{{item.pname}}{{item.type}}{{item.LJTZJ...
如需选择第1个到第6个子元素，使用:nth-child(-n+6)即可实现。更进一步，结合使用可以指定范围，例如选择第6个到第9个子元素，通过:nth-child(n+6):nth-child(-n+9)即可。如果需要选择属于其元素的第N个子元素，不论元素的类型，从最后一个子元素开始计数，可以使用:nth-last-child(n)。若...
1、a和b位置不可颠倒，且a在前b在后。表达式匹配所有下标在集合{an+b; n=0,1,2,...}中的子元素。2、n不可置于b之前，只能在a后。接下来是几个常用的nth-child(an+b)用法示例：1、div:nth-child(odd)或div:nth-child(2n+1)，匹配所有奇数行的div元素，如1,3,5等。2、div:nth-...
列出几个最常用的用法: 1、div:nth-child(odd)或者div:nth-child(2n+1)——表示多个div的奇数行:1,3,5等。 2、div:nth-child(even)或者div:nth-child(2n)——表示多个div的偶数行:2,4,6等。 3、a=0,b=常数(比如7)div:nth-child(7)——代表多个div的第七个元素。