nth-child(n) 是一个伪类选择器,用于选择父元素中的第n个子元素。n可以是一个具体的数字,也可以是公式,比如2n+1(匹配所有奇数元素)或3n-2(匹配特定的序列)等。 2. 如何使用 nth-child(n) 选择器匹配序号为2、5、8的元素 为了匹配序号为2、5、8的元素,我们需要构造一个能够涵盖这些特定序号的公式。由于...
.info:nth-child(2) 正确:查找第二个元素,且这个元素的class包含"info"。错误:查找第二个class包含"info"的元素。 p:nth-of-type(2) 查找相同HTML标记类型中排行第二的元素,且这个元素是p(或者直观的说查找第二个p类型元素) .info:nth-of-type(2) 查找相同HTML标记类型中排行第二的元素,且这个元素的clas...
然后执行nth-child(2)是对上述的每个div进行过滤。 首先看1, 有两个子元素1-1,1-2,所以1-2被选中 然后1-1, 有两个子元素1-1-1, 1-1-2, 所有1-2-2被选中 1-1-1,无子元素,pass 1-1-2, 无子元素,pass 1-2,有两个子元素1-2-1,1-2-2,所以1-2-2被选中 1-2-1, 无子元素,pass 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),n 可以是数字、关键词或公式。选择器匹配属于其父元素的第N个子元素,不论元素的类型。 序号写法: li:nth-child(3){background:orange;}/把第3个LI的背景设为橙色/ 倍数写法: li:nth-child(3n){background:orange;}/把第3、第6、第9、…、所有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)表示选择列表中的第3个标签，代码如下：li:nth-...
:nth-child(-n+3){ margin-top: 12px; } 2.选择前几个元素 /*【负方向范围】选择第1个到第6个 */ :nth-child(-n+6){} 3.从第几个开始选择 /*【正方向范围】选择从第6个开始的 */ :nth-child(n+6){} 4.两者结合使用,可以限制选择某一个范围 ...
可以使用 :nth-last-child 和 :nth-child 两个伪类一起组合实现。 例如: li:nth-last-child(-n+3):nth-child(3n+3) { /* 选取最后一个 nth-child 直到 n 可以被 3 整除的元素*/ background-color: yellow; } 上述代码中,我们使用了nth-last-child(-n+3)选取最后三个元素,然后再用nth-child(3n...
nth-child(num):选取第num个元素。 nth-child(n+num):选取大于等于num个元素。 nth-child(-n+num):选取小于等于num个元素。 nth-child(2n):选取偶数标签。 nth-child(2n-1):选取奇数标签。 nth-child(3n+1):每隔两个元素,取一个。 nth-last-child(num):选取倒数第num个元素。 如果我解决了同学的问题...
nth-child(n)、first-child、last-child用法 注:nth-child(n)选择器匹配父元素中的第n个子元素。 n可以是一个数字,一个关键字,或者一个公式。 nth-child(n)用法: 1、nth-child(3) 表示选择列表中的第3个标签,代码如下: li:nth-child(3){background:#fff} ...