Heim > Artikel > Web-Frontend > So wählen Sie in CSS nur Zeilen mit gerader Nummer aus
So wählen Sie in CSS nur Zeilen mit gerader Nummer aus
- 青灯夜游Original
- 2021-11-10 14:05:1911100Durchsuche
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}“.
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){样式}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>Rendering:
(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!