1.first-child 选择列表中的第一个标签 li:first-child{color:red} 2. last-child 选择列表中的最后一个标签 li:last-child{color:pink} 3.nth-child(n) 这里的n为数字,表示选择列表中的第n个标签 例如选择第三个标签 li:nth-child(3){color:pink} 4.nth-child(2n) 选择列表中的偶数,选中 2、4、6...
一、选择列表中的偶数标签:nth-child(2n) 二、选择列表中的奇数标签 :nth-child(2n-1) 三、选择从第6个开始的,直到最后:nth-child(n+6) 四、选择第1个到第6个 :nth-child(-n+6) 五、两者结合使用,可以限制选择某一个范围,选择第6个到第9个 :nth-child(n+6):nth-child(-n+9) :nth-last-chil...
:nth-child() 选择器,该选择器选取父元素的第 N 个子元素,与类型无关。 一、选择列表中的偶数标签:nth-child(2n) 二、选择列表中的奇数标签 :nth-child(2n-1) 三、选择从第6个开始的,直到最后:nth-child(n+6) 四、选择第1个到第6个 :nth-child(-n+6)...
li:nth-child(odd){background:#999;} 我们可以通过另外的方法选择奇数行,例如: nth-child(n+1) 、 nth-child(2n-1) 等。 代码如下: 代码语言:javascript 复制 /*First*/li:nth-child(n+1){background:#999;}/*Second*/li:nth-child(2n-1){background:#999;} nth-child(even)nth-child(even):...
5、nth-child(2n-1) 这个表示选择列表中的奇数标签,即选择 第1、第3、第5、第7……标签。 6、nth-child(n+3) 这个表示选择列表中的标签从第3个开始到最后。 7、nth-child(-n+3) 这个表示选择列表中的标签从0到3,即小于3的标签。 8、nth-last-child(3) ...
:nth-child() 选择器,该选择器选取父元素的第 N 个子元素,与类型无关。 一、偶数:nth-child(2n) 二、奇数 :nth-child(2n-1) 三、第6个开始的,直到最后:nth-child(n+6) 四、选择第1个到第6个 :nth-child(-n+6) 五、两者结合使用,可以限制选择某一个范围,选择第6个到第9个 :nth-child(n+6...
语法::nth-child(n) 说明::nth-child() 是CSS3的一个伪类选择器,匹配父元素中的第 n 个子元素,元素类型没有限制。 n可以是一个数字,一个关键字,或者一个公式。 下面用案例来说明各个常见的情况用法 原始效果demo <liv-for="item in listData">{{item.pname}}{{item.type}}{{item.LJTZJH}}{{item...
nth-child(odd):选择列表的奇数行。 举例,奇数行背景显示为灰色,代码如下: li:nth-child(odd){ background: #999; } 我们可以通过另外的方法选择奇数行,例如: nth-child(2n+1) 、 nth-child(2n-1) 等。 代码如下: /*First*/ li:nth-child(2n+1){ ...
例如,如果我们想选择列表中的第一个和第三个列表项,并为它们应用不同的样式,我们可以使用:nth-child(2n+1)选择器。这个选择器将选择所有奇数位置的子元素。 下面是一个示例代码: 代码语言:css 复制 ul li:nth-child(2n+1){background-color:#f2f2f2;} ...
:nth-child(2n-1)选取奇数标签,2n-1可以是odd 点此查看实例展示 .demo01 li:nth-child(2n-1){background:#090} :nth-child(3n+1)自定义选取标签,3n+1表示“隔二取一” 点此查看实例展示 .demo01 li:nth-child(3n+1){background:#090}