我们可以通过CSS来实现这样的效果,CSS 给我们提供了几个样式参数:first-child、last-child、nth-child(n)。 下面介绍它们的使用方法: first-childfirst-child:选择列表中的第一个标签。 举例:第一行字体显示为红色,代码如下: 代码语言:javascript 复制 li:first-child{color:red;} last-childlast-child:选择列表...
使用:nth-last-child()选择器: 代码语言:css 复制 li:nth-last-child(-n+2){/* 在此处添加您的样式 */} 这将选择列表中的最后2项,并应用您指定的样式。 使用:nth-last-of-type()选择器: 代码语言:css 复制 li:nth-last-of-type(-n+2){/* 在此处添加您的样式 */} 这将选择列表中的...
②nth-last-child(-n+n):选择倒数第 n 个及之前(从下往上,倒着数)的元素。 举例:倒数第三个及之后的元素字体设置为粗体,代码如下: li:nth-last-child(-n+3){ font-weight: bold; } 6.nth-child(3n)、nth-child(3n+1) nth-child(3n):选择第 3、6、. . . 个元素,选择三的倍数。 举例:第3...
E:nth-last-child(n)选择器和前面的E:nth-child(n)选择器非常的相似,只是这里多了一个“last”,所起的作用和“E:nth-child(n)”选择器有所区别,从某父元素的最后一个子元素开始计算,来选择特定的元素。就不举例说明了。 二、E:nth-of-type(n) 和 E:nth-last-of-type(n) 1.E:nth-of-type(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} ...
结构性伪类选择器—nth-child(n) “:nth-child(n)”选择器用来定位某个父元素的一个或多个特定的子元素。其中“n”是其参数,而且可以是整数值(1,2,3,4),也可以是表达式(2n+1、-n+5)和关键词(odd、even),但参数n的起始值始终是1,而不是0。也就是说,参数n的值为0时,选择器将选择不到任何匹配的...
:nth-last-child(n) 选择器匹配属于其元素的第 N 个子元素的每个元素,不论元素的类型,从最后一个子元素开始计数。n可以是一个数字,一个关键字,或者一个公式。提示: 请参阅 :nth-last-of-type() 选择器。该选择器匹配父元素中的倒数第n个结构子元素。
:first-child:nth-last-child(1) 选择只有一个元素的第一个元素 —— 即是第一个元素又是从最后一个元素开始数的第一个元素 :first-child:nth-last-child(2) 仅有2个元素的第一个元素 —— 即是第一个元素又是从最后一个元素开始数的第二个元素 ...
这在CSS中已经存在很多年了,但现在通过CSS:has,它变得更加强大。我们可以把nth-last-child选择器和:has结合起来,以达到神奇的效果!你没听错。 在这篇文章中,我将强调几个例子,说明我们可以将一个CSS选择器和:has结合起来,形成一个有条件的组件/布局状态。
first-child表示选择列表中的第一个标签。代码如下: li:first-child{background:#090} 上面的意思是,li 列表中的 第一个li模块的背景颜色。 2、last-child last-child表示选择列表中的最后一个标签,代码如下: li:last-child{background:#090} 3、nth-child(3) ...