css选择前几个元素或者后几个元素

css选择前几个元素或者后几个元素_第1张图片


<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>title>
		<style type="text/css">
			#nth-test div:nth-child(-n + 4) {
				background-color: red;
			}
		style>
	head>
	<body>
		<div id="nth-test">
			<div>1div>
			<div>2div>
			<div>3div>
			<div>4div>
			<div>5div>
			<div>6div>
			<div>7div>
		div>
	body>
html>

选前四个:

#nth-test div:nth-child(-n + 4) {
	background-color: red;
}

css选择前几个元素或者后几个元素_第2张图片

选弟3个往后的:

#nth-test div:nth-child(n + 3) {
	background-color: red;
}

css选择前几个元素或者后几个元素_第3张图片

选偶数元素:

#nth-test div:nth-child(2n) {
	background-color: red;
}

css选择前几个元素或者后几个元素_第4张图片

选基数元素:

#nth-test div:nth-child(2n+1) {
	background-color: red;
}

css选择前几个元素或者后几个元素_第5张图片

你可能感兴趣的:(前端原生技术:css)