Heim > Web-Frontend > CSS-Tutorial > Hauptteil

So wählen Sie in CSS nur Zeilen mit gerader Nummer aus

青灯夜游
Freigeben: 2021-11-11 16:13:10
Original
11087 Leute haben es durchsucht

In CSS können Sie den Pseudoklassenselektor „:nth-child()“ verwenden, um gerade nummerierte Zeilen von regulären Elementen wie Tabellen oder li auszuwählen. nth-child(2n ){style}“ oder „element:nth-child(even){style}“.

So wählen Sie in CSS nur Zeilen mit gerader Nummer aus

Die Betriebsumgebung dieses Tutorials: Windows7-System, CSS3- und HTML5-Version, Dell G3-Computer.

In CSS können Sie den Pseudoklassenselektor „:nth-child()“ verwenden, um gerade Zeilen auszuwählen. Verwenden Sie den CSS3-Pseudoklassenselektor :nth-child(), um gerade Zeilen regulärer Elemente wie Tabellen oder Li auszuwählen.

:nth-child(n) 选择器匹配父元素中的第 n 个子元素,元素类型没有限制。n kann eine Zahl, ein Schlüsselwort oder eine Formel sein.

Wenn n das Schlüsselwort „gerade“ oder die Formel „2n“ ist, können Sie gerade Zeilen auswählen.

Syntax für die Auswahl gerader Zeilen:

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

元素:nth-child(even){样式}
Nach dem Login kopieren

Beispiel:

<!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>
Nach dem Login kopieren

Rendering:

So wählen Sie in CSS nur Zeilen mit gerader Nummer aus

(Lernvideo-Sharing: CSS-Video-Tutorial)

Das obige ist der detaillierte Inhalt vonSo wählen Sie in CSS nur Zeilen mit gerader Nummer aus. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
css
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website:Online-PHP-Schulung für das Gemeinwohl,Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln!