:nth-last-of-type是一个 CSS 伪类选择器,它允许你根据元素在其父元素中的类型以及从最后一个元素开始的位置来选择元素。这个选择器特别有用,当你需要基于元素类型以及它们在父元素中的逆序位置来选择和样式化元素时。 语法如下: element:nth-last-of-type(n) {/* 样式 */} 其中,element是你要选择的元素类...
CSS3 :nth-last-of-type() 选择器 完整CSS选择器参考手册 实例 指定每个p元素匹配同类型中的倒数第2个同级兄弟元素背景色: p:nth-last-of-type(2) { background:#ff0000; } 尝试一下 » 定义和用法 :nth-last-of-type(n)选择器匹配同类型中的倒数
.site-header:has(li:nth-last-child(n + 4)) .site-header__end { margin-left: auto; } 我们能做得更好吗?可以。但这还没有得到很好的支持(目前来说)。我们可以添加一个布尔CSS变量,当标题有4个或更多的项目时,它将被切换,然后使用样式查询来改变标题。 .site-header:has(li:nth-last-child(n +...
:nth-last-child(n) 选择器匹配属于其元素的第 N 个子元素的每个元素,不论元素的类型,从最后一个子元素开始计数。n可以是一个数字,一个关键字,或者一个公式。提示: 请参阅 :nth-last-of-type() 选择器。该选择器匹配父元素中的倒数第n个结构子元素。
:nth-last-of-type()也一样: 同样选择到了最后一个div元素,并不受最后一个p元素的影响。 总结 在以上八个伪类选择器中,:first-child:last-child:nth-child(n):nth-last-child(n)在选择元素时,是按照其所有类型的兄弟元素开始计数,而:first-of-type:last-of-type:nth-of-type(n)nth-last-of-type(n...
和前面的“:nth-child(n)”选择器非常的相似,只是这里多了一个“last”,所起的作用和“:nth-child(n)”选择器有所区别,从某父元素的最后一个子元素开始计算,来选择特定的元素。 结构性伪类选择器—nth-last-child(n) 和前面的“:nth-child(n)”选择器非常的相似,只是这里多了一个“last”,所起的作用和...
nth-last-of-type(n)選擇器和“:nth-of-type(n)”選擇器是一樣的,選擇父元素中指定的某種子元素類型,但它的起始方向是從最後一個子元素開始,而且它的使用方法類似於上節中介紹的“:nth-last-child(n)”選擇器一樣。 nth-last-of-type(n)选择器 ...
介绍一下常用的css3结构伪类选择器,nth-child、nth-last-child、nth-of-type、nth-last-of-type、first-child、last-child 、first-of-type 、last-of-type、only-child以及only-of-type。结构性伪类选择器的公共特征是允许开发者根据文档结构来指定元素的样式。接下来开始进入正题。
结构性伪类选择器—nth-last-child(n) “:nth-last-child(n)”选择器和前面的“:nth-child(n)”选择器非常的相似,只是这里多了一个“last”,所起的作用和“:nth-child(n)”选择器有所区别,从某父元素的最后一个子元素开始计算,来选择特定的元素。
This CSS tutorial explains how to use the CSS selector called :nth-last-child with syntax and examples. The CSS :nth-last-child selector allows you to target an element that is the nth last child element within its parent.