CSS 中的 :nth-last-child() 选择器是一个非常有用的伪类选择器,它允许我们根据元素在其父元素中的倒数位置来选择元素。下面我将从解释、基本语法和示例三个方面来详细介绍 :nth-last-child() 选择器。 1. 解释 :nth-last-child() 选择器 :nth-last-child() 选择器允许我们基于元素在其父元素中的倒数位...
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-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):选择倒数第 n 个之前的元素。 举例:倒数第三...
使用: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可以是一个数字,一个关键字,或者一个公式。提示: 请参阅 :nth-last-of-type() 选择器。该选择器匹配父元素中的倒数第n个结构子元素。
这在CSS中已经存在很多年了,但现在通过CSS:has,它变得更加强大。我们可以把nth-last-child选择器和:has结合起来,以达到神奇的效果!你没听错。 在这篇文章中,我将强调几个例子,说明我们可以将一个CSS选择器和:has结合起来,形成一个有条件的组件/布局状态。
“:nth-last-child(n)”选择器和前面的“:nth-child(n)”选择器非常的相似,只是这里多了一个“last”,所起的作用和“:nth-child(n)”选择器有所区别,从某父元素的最后一个子元素开始计算,来选择特定的元素。 案例演示 选择列表中倒数第五个列表项,将其背景设置为橙色。
:first-child :first-letter :first-line :hover :last-child :link :nth-child :nth-last-child :only-child :visited child (>) descendant CSS:nth-last-child selector This CSS tutorial explains how to use the CSS selector called:nth-last-childwith syntax and examples. ...
first-child表示选择列表中的第一个标签。代码如下: li:first-child{background:#090} 上面的意思是,li 列表中的 第一个li模块的背景颜色。 2、last-child last-child表示选择列表中的最后一个标签,代码如下: li:last-child{background:#090} 3、nth-child(3) ...
:nth-last-child(n) 选择器匹配属于其元素的第 N 个子元素的每个元素,不论元素的类型,从最后一个子元素开始计数。n 可以是数字、关键词或公式。提示:请参阅 :nth-of-type() 选择器,该选择器选取父元素的第 N 个指定类型的子元素。更多实例 实例1 ...