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-...
li:nth-child(n+5){background:#0ab1fc;} nth-last-child(n)nth-last-child(n):选择倒数第 n 个元素。 举例:倒数第三元素字体设置为红色,代码如下: 代码语言:javascript 复制 li:nth-last-child(3){color:red;} 同样可以使用上面的方法进行拓展,方法如下: nth-last-child(n+n)nth-last-child(n+n)...
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(n) 选择器匹配父元素中的第 n 个子元素,元素类型没有限制。n 可以是一个数字,一个关键字,或者一个公式。提示: 请参阅选择器。该选择器匹配同类型中的第 n 个同级兄弟元素。 语法element:nth-child(n)element 是你想要选择的 HTML 元素。 n 是一个参数,可以是关键字(如 odd 或even),或者...
选择第n个元素:使用:nth-child(n)。例如,选择第三个元素并将其字体颜色设置为蓝色: li:nth-child(3) {color: blue; } 选择奇数或偶数元素:使用:nth-child(odd)选择奇数元素,使用:nth-child(even)选择偶数元素。例如,将奇数元素的背景色设置为灰色: li:nth-child...
结构性伪类选择器—nth-child(n) 用来定位某个父元素的一个或多个特定的子元素。 其中“n”是其参数,而且可以是整数值(1,2,3,4),也可以是表达式(2n+1、-n+5)和关键词(odd、even),但参数n的起始值始终是1,而不是0。 也就是说,参数n的值为0时,选择器将选择不到任何匹配的元素。
:nth-child(n) { //CSS Property } 括号中的 " n" 是表示匹配元素模式的参数。可以是偶数或奇数的功能表示法。 奇数值表示位置在位置上像1、3、5等的奇数的元素。类似地,偶数值表示位置在偶数的元素依次为2、4、6等。 功能符号(An + B):功能符号表示兄弟姐妹的位置与 An + B 模式,其中 A 是整...
:nth-child(3n+1) 6.范围高级用法 使用nth-child(n+2):nth-child(odd):nth-child(-n+9) 我们将会选中的子元素是从第2位到第9位,并且只包含奇数位。 nth-child(n+2):nth-child(odd):nth-child(-n+9) 原文链接:https://blog.csdn.net/forest_fire/article/details/79279537...
在CSS中 :nth-child(n) 这类伪类很重要,但是在应用中遇到了很奇怪的问题,让我对自己的理解能力有了深深的怀疑 :nth-child(n)的解释是: 选择器匹配父元素的第n个子元素 例如html 这是一个标题 这是第一个段落。 这是第二个段落。 这是第三个段落。 这是第四个段落...
li:last-child { background-color: red; } 3):nth-child(n):选取父元素中第n个子元素。 示例:将列表中的奇数位置的项目的背景色改为蓝色: li:nth-child(odd) { background-color: blue; } 3.4 否定伪类选择器 这类选择器用于排除符合特定条件的元素。例如: ...