在CSS中,要选中前三个元素,可以使用伪类选择器 :nth-child() 并结合 -n+3 参数来实现。以下是详细的步骤和代码示例: 确定选中元素的范围: 确定你想要应用样式的元素范围。例如,如果你想要选中某个父元素下的前三个子元素,你需要指定这个父元素。 选择使用CSS的伪类选择器: 使用:nth-child() 伪类选择器,它能...
nth-child(-n+n)nth-child(-n+n):选择第 n 个之前的元素(此处的 n 是后面的那个,下同)。 举例:前三行背景色设置为绿色,代码如下: 代码语言:javascript 复制 li:nth-child(-n+3){background:#2cae1d;} nth-child(n+n)nth-child(n+n):选择第 n 个之后的元素。 举例:第五行及以后背景色设置为...
margin-top: 12px; } 2.选择前几个元素 /*【负方向范围】选择第1个到第6个 */ :nth-child(-n+6){} 3.从第几个开始选择 /*【正方向范围】选择从第6个开始的 */ :nth-child(n+6){} 4.两者结合使用,可以限制选择某一个范围 /*【限制范围】选择第6个到第9个,取两者的交集【感谢小伙伴的纠正~...
一、选择列表中的偶数标签 :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-of-type(n) 选择器匹配属于父元素的特定类型的第N 个子元素的每个元素. n 可以是数字、关键词或公式。 /* 选择第n个,n位数字 */ :nth-child(n) /* 选择列表中的偶数标签 */ :nth-child(2n) /*选择列表中的奇数标签 */ :nth-child(2n-1) /*选择前几个元素 */ /*【负方向范围】选择第...
/* 选择第n个,n位数字 */ :nth-child(n) 选择列表中的偶数标签 :nth-child(2n) 选择列表中的奇数标签 :nth-child(2n-1) 选择前几个元素 /*【负方向范围】选择第1个到第6个 */ :nth-child(-n+6){} 从第几个开始选择 /*【正方向范围】选择从第6个开始的,直到最后 */ :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(-n+3){margin-top:12px;} 扩展 选择前几个元素 负方向范围】选择第1个到第6个 :nth-child(-n+6){} 从第几个开始选择 【正方向范围】选择从第6个开始的 :nth-child(n+6){} 两者结合使用,可以限制选择某一个范围 【限制范围】选择第6个到第9个,取两者的交集【感谢小伙伴的纠正~】 ...
:nth-child(2n-1) /*选择前几个元素 */ /*【负方向范围】选择第1个到第6个 */ :nth-child(-n+6){} /*从第几个开始选择*/ /*【正方向范围】选择从第6个开始的,直到最后 */ :nth-child(n+6){} /*两者结合使用,可以限制选择某一个范围 */ ...
nth-child(-n+n):选择第 n 个及之前的元素。 举例:前三行背景色设置为绿色,代码如下: li:nth-child(-n+3){ background: #2cae1d; } 5.选择倒数第 n 个之后/前的元素。 ①nth-last-child(n+n):选择倒数第 n 个及之后(从下往上,倒着数)的元素。