nth-last-child(-n+3)匹配最后三个子元素 .item li:nth-child(-n+3){background-color:red;}.item li:nth-last-child(-n+3){background-color:pink;} 特殊规律实现方法 分别实现(3,7,11) 、(3,7,11) 、(2, 5, 8, 11) 一些特殊规律的情况,这里只分别列举几个规律方便大家看出。 /* 3,7,1...
:nth-child(n) { //你的样式代码 } ``` 请注意,这里的`n`可以是一个具体的数字,也可以是一个表达式。例如: *如果想选择一个父元素下的第2个子元素,可以使用`:nth-child(2)`。 *如果想选择一个父元素下的奇数个子元素,可以使用`:nth-child(odd)`。 *如果想选择一个父元素下的偶数个子元素,可以使...
:nth-child(n+4):nth-child(-n+8) 选中第4-8个子元素。使用 nth-child(n+4):nth-child(-n+8) 我们可以选中某一范围内子元素,上面的例子里是从第4个到第8个子元素 奇数、偶数位 :nth-child(odd) :nth-child(even) 隔选择子元素 :nth-child(3n+1), 选择1,4,7,10 范围高级用法 nth-child(n...
li:nth-child(n+3){background:#fff} 5、nth-child(-n+3) 表示选择列表中的标签从0到3,即小于3的标签(逆向选择),代码如下: li:nth-child(-n+3){background:#fff} 6、nth-last-child(3) 表示选择列表中的倒数第3个标签,代码如下: li:nth-last-child(3){background:#fff} first-child用法: 1、...
1.简单的归纳下nth-child()的几种用法。 第一:nth-child(number) 直接匹配第number个元素。参数number必须为大于0的整数。 (EG) li:nth-child(3){background:orange;}/*把第3个LI的背景设为橙色*/ 第二:nth-child(an) 匹配所有倍数为a的元素。其中参数an中的字母n不可缺省,它是倍数写法的标志,如3n、...
nth-last-child(n+n)nth-last-child(n+n):选择倒数第 n 个之前的元素。 举例:倒数第三个及之前的元素字体设置为粗体,代码如下: 代码语言:javascript 复制 li:nth-last-child(n+3){font-weight:bold;} 上面的几种方法运行效果如下图: nth-last-child(3n)nth-last-child(3n):选择第 3、6、. . . ...
nth-child(n) 选择器匹配属于其父元素的第 n 个子元素。 使用它的时候需要注意几点: 第n个子元素的计数是从1开始,不是从0开始的 选择表达式中的字母n代表≥0的整数 它有3种常见用法 直接指明n的值:span:nth-child(1) 用even/odd分别代表偶数 / 奇数:span:nth-child(even) ...
nth-child(n)用法：在开发过程中，会碰到一些选择器的需求：例如使列表中的第一项或者最后一项显示不同的样式 、列表中的奇数或者偶数项显示不同的背景色 等等。可以通过 CSS 来实现这样的效果，CSS 给我们提供了几个样式参数：first-child、last-child、nth-child(n)。含义 根据元素ID来选择元素，...
51CTO博客已为您找到关于nth-child(n)用法的相关内容,包含IT学习相关文档代码介绍、相关教程视频课程,以及nth-child(n)用法问答内容。更多nth-child(n)用法相关解答可以来51CTO博客参与分享和学习,帮助广大IT技术人实现成长和进步。
nth-child(n)是CSS选择器中的一个伪类,用于选择父级元素下特定位置的子元素。它通过指定一个数值参数n来确定要选择的子元素的位置。 nth-child(n)的用法如下: n可以是一个具体的整数值,例如2表示选择父级元素下的第二个子元素。 n也可以是一个公式,例如2n表示选择父级元素下每隔两个子元素的子元素(即偶数...