css nth-child多种布局使用方式示例代码-html代码-BFW代码库

css nth-child多种布局使用方式示例代码

代码语言：html

代码描述：css nth-child多种布局使用方式示例代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  

  
<style>
main {
	display: flex;
	flex-direction: column;
	gap: 4vmin;
	/* border: 1px solid blue; */
}

ul {
	display: grid;
	grid-template-columns: repeat(8, 1fr);
	place-items: center;
	list-style-type: none;
	width: 100%;
	max-height: 8vmin;
	padding: 0.5em;
	background: white;
	border: 1px solid blue;
	border-radius: 0.25em;
}
li {
	display: grid;
	place-items: center;
	width: 5vmin;
	aspect-ratio: 1;
	background: lightblue;
	border-radius: 50%;
	color: indigo;
}

.one li:nth-child(2n+4) {
	background: indigo;
	color: ivory;
}
.two li:nth-child(-n+4) {
	background: indigo;
	color: ivory;
}
.three li:nth-child(n+4) {
	background: indigo;
	color: ivory;
}
.four li:nth-child(3n-1) {
    background: indigo;   
	color: ivory;
}
.five li:nth-last-child(2) {
    background: indigo;
	color: ivory;
}
.six li:nth-child(3n) {
    background: indigo;
	color: ivory;
}

*, * + * {
	padding: 0;
	margin: 0;
	box-sizing: border-box;
}
body {
	min-height: 100vh;
	display: grid;
	place-items: center;
	background: ivory;
	font-family: system-ui, sans-serif;
	font-size: 2.5vmin;
}
section {
	max-width: 45em;
	margin-inline: 2em;
	display: grid;
	grid-template-columns: 40% 60%;
	grid-template-rows: 10vh;
}
p {
	margin-right: 1em;
	line-height: 1.3;
}
code {
	font-weight: 600;
}
</style>


  
  
</head>

<body >
  <h2>Trying to get your head round :nth-child? Me too 🧐</h2>
<main>
	<section>
		<p><code>:nth-child(2n+4)</code><br>
			select every second element starting with the fourth</p>
		<ul class="one">
			<li>1</li>
			<li>2</li>
			<li>3</li>
			<li>4</li>
			<li>5</li>
			<li>6</li>
			<li>7</li>
			<li>8</li>
		</ul>
	</section>

	<section>
		<p><code.........完整代码请登录后点击上方下载按钮下载查看