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...
1、first-child first-child表示选择列表中的第一个标签。代码如下: li:first-child{background:#090} 上面的意思是,li 列表中的 第一个li模块的背景颜色。 2、last-child last-child表示选择列表中的最后一个标签,代码如下: li:last-child{background:#090} 3、nth-child(3) 表示选择列表中的第3个标签,...
nth-child(2n)/nth-child(even): 双行样式 nth-child(2n+1)/nth-child(odd): 单行样式 .item li:nth-child(2n){background-color:red;}.item li:nth-child(2n+1){background-color:pink;} 实现前三个和后三个样式效果 实现前三个和后三个样式效果 nth-child(-n+3)匹配最前三个子元素 nth-last-...
1、first-child first-child表示选择列表中的第一个标签。代码如下: li:first-child{background:#090} 上面的意思是,li 列表中的 第一个li模块的背景颜色。 2、last-child last-child表示选择列表中的最后一个标签,代码如下: li:last-child{background:#090} 3、nth-child(3) 表示选择列表中的第3个标签,...
:nth-child(-n+3){margin-top:12px;} 扩展 选择前几个元素 负方向范围】选择第1个到第6个 :nth-child(-n+6){} 从第几个开始选择 【正方向范围】选择从第6个开始的 :nth-child(n+6){} 两者结合使用,可以限制选择某一个范围 【限制范围】选择第6个到第9个,取两者的交集【感谢小伙伴的纠正~】 ...
:nth-child(-n+3){ margin-top: 12px; } 2.选择前几个元素 /*【负方向范围】选择第1个到第6个 */ :nth-child(-n+6){} 3.从第几个开始选择 /*【正方向范围】选择从第6个开始的 */ :nth-child(n+6){} 4.两者结合使用,可以限制选择某一个范围 ...
nth-last-child(3n+1)nth-last-child(3n+1):选择第 1、4、7 个元素,从第一个开始每个递增三个。 举例:第1、4、7 . . . 行背景色设置为红色,代码如下: 代码语言:javascript 复制 li:nth-child(3n+1){background:red;} 上面的几种方法运行效果如下图: ...
通过上面的css,我们可以在浏览器中看到,这是个LI都变成了橙色的原点.如下表所示 好,我们开始演示 选择第N个LI 代码语言:javascript 复制 ul.list li:nth-child(3){background:#000;} 如上面的CSS所示,如果要选择第三个,就写3即可. 这是最简单的.我们可以使用这种方法,给不同的li加上不同的样式,如果你有...
first-child表示选择列表中的第一个标签。代码如下: li:first-child{background:#090} 上面的意思是,li 列表中的 第一个li模块的背景颜色。 2、last-child last-child表示选择列表中的最后一个标签,代码如下: li:last-child{background:#090} 3、nth-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...