前端随笔001.css选择倒数第几个元素

原创于 2022-03-04 13:42:04 发布 · 878 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#html #css

css样式专栏收录该内容

1 篇文章

订阅专栏

这篇博客介绍了CSS选择器:nth-last-child()和:nth-last-of-type()的用法，重点在于它们如何帮助开发者在不确定元素数量的情况下选取页面上的特定元素。示例代码演示了如何通过:nth-last-child()将倒数第一个div设置为红色。此外，还提到了:nth-last-of-type()的选择器，并给出了不同元素数量场景下的应用实例。文章结尾推荐了一个在线工具供读者实践这两个选择器。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

nth-last-child()

括号中的是从后面输第几个,这个一般试用于你不确定某一类元素个数，然后想取最后几个元素的时候。
如下代码，倒数第一个div将会变成红色！

<head>
<style>
	.box>.element:nth-last-child(1){
		background:red;
	}
</style>
</head>
<body>
<div class="box" >
	<div class="element">第1个DIV</div>
	<div class="element">第2个DIV</div>
	<div class="element">第...个DIV</div>
	<div class="element">倒数第2个DIV</div>
	<div class="element">倒数第1个DIV</div>
</div>
</body>