具体用法如下: :nth-child(n)选择其父元素的第n个子元素,无论其类型是什么。 :nth-child(odd)选择其父元素中位置为奇数的子元素。 :nth-child(even)选择其父元素中位置为偶数的子元素。 :nth-child(n + x)选择其父元素中位置大于等于x的子元素。 例如,要选择父元素中的第三个子元素,可以使用如下方式:...
首先,让我们来了解一下nth-child(n)选择器的基本语法。在SCSS中,我们可以使用:nth-child(n)来选择父元素的第n个子元素。这里的n可以是一个具体的数字,也可以是一个表达式。 例如,如果我们想选择一个父元素下的第2个子元素,我们可以使用:nth-child(2)。如果我们想选择一个父元素下的奇数个子元素,我们可以使...
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...
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、...
nth-child的用法 nth-child的⽤法 1、:nth-child(2)选取第⼏个标签，“2可以是你想要的数字”2、:nth-child(n+4)选取⼤于等于4标签，“n”表⽰从整数，下同 3、:nth-child(-n+4)选取⼩于等于4标签 4、:nth-child(2n-1)选取奇数标签，2n-1可以是odd 5、:nth-child(2n)选取偶数标签，2n...
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、. . . ...
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-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-last-child() 选择器 :nth-last-child(n) 选择器匹配属于其元素的第 N 个子元素的每个元素,不论元素的类型,从最后一个子元素开始计数。 n 可以是数字、关键词或公式。 提示:请参阅 :nth-last-of-type() 选择器,该选择器选取父元素的第 N 个指定类型的子元素,从最后一个子元素开始计数。