前端HTML中nth-child和nth-of-type的使用

钱端攻城狮

已于 2022-02-28 17:40:39 修改

阅读量676

点赞数

分类专栏： HTML 文章标签： html 前端 css

于 2022-02-21 21:52:14 首次发布

本文链接：https://blog.csdn.net/m0_54932975/article/details/123056954

版权

HTML 专栏收录该内容

40 篇文章 1 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style type="text/css">
			li:nth-child(1){
				background-color: red;
			}
			li:nth-child(2){
				background-color: red;
			}
			/*不区分类型 统一从第一个标签记位置*/
			li:nth-child(2n-1){
				background-color: red;
			}
			/*
			 偶数 2n
			 奇数 2n-1
			 成倍查找 2n 3n 4n.....*/
			li:nth-of-type(3){
				background-color: blue;
			}
			li:nth-of-type(4){
				background-color: blue;
			}
		</style>
	</head>
	<body>
		<!--ul>li{列表$}*10-->
		<ul>
			<li>列表1</li>
			<p>段落1</p>
			<li>列表2</li>
			<li>列表3</li>
			<p>段落2</p>
			<li>列表4</li>
			<li>列表5</li>
			<li>列表6</li>
			<p>段落3</p>
			<li>列表7</li>
			<li>列表8</li>
			<li>列表9</li>
			<li>列表10</li>
			<p>段落4</p>
			<p>段落5</p>
			<p>段落6</p>
		</ul>
	</body>
</html>

在这里插入图片描述