Bagaimana untuk memilih hanya baris bernombor genap dalam css-tutorial css-php.cn

Bagaimana untuk memilih hanya baris bernombor genap dalam css

青灯夜游

Lepaskan： 2021-11-11 16:13:10

asal

11155 orang telah melayarinya

Dalam CSS, anda boleh menggunakan pemilih kelas pseudo ":nth-child()" untuk memilih baris bernombor genap ini boleh memilih baris bernombor genap elemen biasa seperti jadual atau li sintaks "Element:nth" -child(2n){style}" atau "element:nth-child(even){style}".

Bagaimana untuk memilih hanya baris bernombor genap dalam css

Persekitaran pengendalian tutorial ini: sistem Windows 7, versi CSS3&&HTML5, komputer Dell G3.

Dalam CSS, anda boleh menggunakan pemilih kelas pseudo ":nth-child()" untuk memilih baris genap. Menggunakan pemilih kelas pseudo css3 :nth-child(), anda boleh memilih baris genap elemen biasa seperti jadual atau li. Pemilih

:nth-child(n) sepadan dengan nelemen anak ke dalam elemen induk dan tiada sekatan pada jenis elemen. n boleh menjadi nombor, kata kunci atau formula.

Apabila n ialah kata kunci "genap" atau formula "2n", anda boleh memilih baris genap.

Sintaks untuk memilih baris genap:

元素:nth-child(2n){样式}

元素:nth-child(even){样式}

Salin selepas log masuk

Contoh:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<style>
			p:nth-child(2n)
			{
				background:#ff0000;
			}
			li:nth-child(even){
				background: #AFEEEE;
			}
			
		</style>
	</head>
	<body>
		<div>
			<p>这是第一个段落。</p>
			<p>这是第二个段落。</p>
			<p>这是第三个段落。</p>
			<p>这是第四个段落。</p>
		</div>
		<ul>
			<li>第一项</li>
			<li>第二项</li>
			<li>第三项</li>
			<li>第四项</li>
		</ul>
	</body>
</html>

Salin selepas log masuk

Rendering:

Bagaimana untuk memilih hanya baris bernombor genap dalam css

(Belajar perkongsian video: tutorial video css)

Atas ialah kandungan terperinci Bagaimana untuk memilih hanya baris bernombor genap dalam css. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!