Css-:nth-child 的用法

最新推荐文章于 2024-03-09 00:46:14 发布

wax9092

最新推荐文章于 2024-03-09 00:46:14 发布

阅读量5.3k

点赞数

分类专栏： css 文章标签： css html sass

本文链接：https://blog.csdn.net/wax9092/article/details/125122048

版权

css 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

概述

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

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

用法

1.每行显示3个盒子:nth-child(3n-1)

以375px设计稿为例，如果移动端，使用rem等缩放道理也一样

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
		<title>学习css</title>
		<style>
		html,body{
			margin:0;
			padding:0;
			font-size: 14px;
		}
		
		.flex{
			display: flex;
			align-items: center;
			flex-wrap: wrap;
			padding:0 10px;
		}
		.item{
			width:115px;
			height: 115px;
			margin-bottom: 5px;
			background-color: blue;
			color: #fff;
		}
		.item:nth-child(3n-1) {
			margin-left: 5px;
			margin-right: 5px;
			background-color: pink;
		}
		</style>
	</head>
	<body>
		<div class="flex">
			<div class="item">1</div>
			<div class="item">2</div>
			<div class="item">3</div>
			<div class="item">4</div>
			<div class="item">5</div>
			<div class="item">6</div>
		</div>
	</body>
</html>

运行效果

2.选择列表中的偶数标签 :nth-child(2n)

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
		<title>学习css</title>
		<style>
		html,body{
			margin:0;
			padding:0;
			font-size: 14px;
		}
		
		.flex{
			display: flex;
			align-items: center;
			flex-wrap: wrap;
			padding:0 10px;
		}
		.item{
			width:115px;
			height: 115px;
			margin-bottom: 5px;
			background-color: blue;
			color: #fff;
		}
		.item:nth-child(2n) {
			margin-left: 5px;
			margin-right: 5px;
			background-color: pink;
		}
		</style>
	</head>
	<body>
		<div class="flex">
			<div class="item">1</div>
			<div class="item">2</div>
			<div class="item">3</div>
			<div class="item">4</div>
			<div class="item">5</div>
			<div class="item">6</div>
		</div>
	</body>
</html>

运行效果

3.选择列表中的偶数标签 :nth-child(2n-1)

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
		<title>学习css</title>
		<style>
		html,body{
			margin:0;
			padding:0;
			font-size: 14px;
		}
		
		.flex{
			display: flex;
			align-items: center;
			flex-wrap: wrap;
			padding:0 10px;
		}
		.item{
			width:115px;
			height: 115px;
			margin-bottom: 5px;
			background-color: blue;
			color: #fff;
		}
		.item:nth-child(2n-1) {
			margin-left: 5px;
			margin-right: 5px;
			background-color: pink;
		}
		</style>
	</head>
	<body>
		<div class="flex">
			<div class="item">1</div>
			<div class="item">2</div>
			<div class="item">3</div>
			<div class="item">4</div>
			<div class="item">5</div>
			<div class="item">6</div>
		</div>
	</body>
</html>

运行效果