CSS:nth-child

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

spfLinux

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

阅读量300

点赞数

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

css 专栏收录该内容

45 篇文章

订阅专栏

<!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