p:nth-child(2){ background:#ff0000; } 只选择第五个元素 li:nth-child(5){ color: green; } 要选择第一个元素,你可以使用:first-child,或者我相信你也可以改下上面的例子来实现。 选择除了前面的五个之外的所有元素 如果有超过10个元素,它将会选中超过5个。 只选择前面的5个 li:nth-child(-n+5)...
二、奇数 :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-child() 选择器 :nth-last-child(n) 选择器匹配属于其元素的第 N ...
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个标签,...
首先，选择器有几种基本形式，包括选择第一项、第N项和最后一项。使用:first-child可选取列表中的第一个元素，例如：first-child。通过:nth-child(n)可选取列表中的第n个元素，其中n是具体的数字。例如：nth-child(2)选取第二项。利用:last-child可选取列表的最后一个元素，例如：last-child。接下...
nth-child是选择父元素下的子元素,下标从1开始 p:nth-child(3n + 0)表示选择p元素父元素下的第3,6,9...个子元素,如果要选中第一个元素,要写成:nth-child(1),同理:nth-child(3n + 1)就代表选中第1,4,7...个子元素。 这里需要注意的是p元素父元素的第一个子元素为h1标签,所以要想选中p元素父元...
first-child first-child：选择列表中的第一个标签。nth-child(n)nth-child(n)：选择列表中的第...
last-child表示选择列表中的最后一个标签，代码如下：li:last-child{background:#090} 3、nth-child(3)表示选择列表中的第3个标签，代码如下：li:nth-child(3){background:#090} 上面代码中的3也可以改成其它数字，如4、5等。想选择第几个标签，就填写几。**4、nth-child(2n) ** 这个表示选择列表中的...
在前端布局开发中，"nth-child(1)"选择器的应用往往被误解，它并非单纯寻找第一个具有特定类样式的元素，而是定位到该类样式的父元素的第一个子元素。这种选择器的逻辑可能会引起混淆，尤其是在理解其工作原理时。通常情况下，当类名为"someClass"的元素是其父元素的第一个子元素时，选择器的效果会...
1.渲染列表时,需要设置前3个元素的margin-top值与其他的不同 :nth-child(-n+3){ margin-top: 12px; } 2.选择前几个元素 /*【负方向范围】选择第1个到第6个 */ :nth-child(-n+6){} 3.从第几个开始选择 /*【正方向范围】选择从第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)...