CSS:nth-child

最新推荐文章于 2021-10-27 15:11:33 发布

spfLinux

最新推荐文章于 2021-10-27 15:11:33 发布

阅读量307

点赞数

分类专栏： css 文章标签： CSS nth-child

css 专栏收录该内容

45 篇文章

订阅专栏

本文介绍了一种使用CSS :nth-child(n)选择器实现不同文本装饰效果的方法，包括无装饰、下划线、上划线、贯穿线及闪烁效果。通过实际代码示例展示了如何为列表项设置不同的文本装饰。

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

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		.test li {
			margin-top: 10px;
		}
		.test li:nth-child(1) {
			-webkit-text-decoration-line: none;
			-moz-text-decoration-line: none;
			text-decoration-line: none;
		}
		.test li:nth-child(2) {
			-webkit-text-decoration-line: underline;
			-moz-text-decoration-line: underline;
			text-decoration-line: underline;
		}
		.test li:nth-child(3) {
			-webkit-text-decoration-line: overline;
			-moz-text-decoration-line: overline;
			text-decoration-line: overline;
		}
		.test li:nth-child(4) {
			-webkit-text-decoration-line: line-through;
			-moz-text-decoration-line: line-through;
			text-decoration-line: line-through;
		}
		.test li:nth-child(5) {
			-webkit-text-decoration-line: blink;
			-moz-text-decoration-line: blink;
			text-decoration-line: blink;
		}
	</style>
</head>
<body>
	<ul class="test">
		<li>没有文本装饰</li>
		<li>文本带有下划线装饰</li>
		<li>文本带有上划线装饰</li>
		<li>文本带有贯穿线装饰</li>
		<li>文本带有闪烁装饰</li>
	</ul>
</body>
</html>

:nth-child(n) 选择器匹配属于其父元素的第 N 个子元素，不论元素的类型。

n 可以是数字、关键词或公式。

参考：

《CSS参考手册》 W3School