Heim > Artikel > Web-Frontend > CSS-Positionierung zwischen Geschwisterelementen

CSS-Positionierung zwischen Geschwisterelementen

无忌哥哥Original: 2018-06-29 15:26:215609Durchsuche

* Hinweis:

* 1. Der native CSS-Selektor ist am schnellsten, um Elemente zu finden

* 2. Der benutzerdefinierte Selektor beginnt mit :, die der Pseudoklasse in CSS sehr ähnlich ist

* 3. Der benutzerdefinierte Selektor wird basierend auf der Position positioniert, die mit dem nativen Selektor gefunden wurde

* 4. Verwenden Sie ebenfalls native Selektoren wie möglich, um Elemente zu erhalten

1.:nth-child(n): CSS wird aus 1 berechnet

$(&#39;ul :nth-child(2)&#39;).css(&#39;color&#39;, &#39;red&#39;)

2.:nth-child(2n): Wählen Sie alle gerade nummerierten Elemente aus ( n=[1,2,3,...])

$(&#39;ul :nth-child(2n)&#39;).css(&#39;color&#39;, &#39;red&#39;)

3.:nth-child(2n+1): Alle ungeradzahligen Elemente auswählen (n=[ 0,1,2,. ..])

$(&#39;ul :nth-child(2n+1)&#39;).css(&#39;color&#39;, &#39;red&#39;)

4.:nth-child(even): Holen Sie sich das gerade nummerierte Positionselement; nth-child(odd): Holen Sie sich das ungerade nummerierte Positionselement

$(&#39;ul :nth-child(even)&#39;).css(&#39;color&#39;, &#39;red&#39;)  //偶数行为红色文本
$(&#39;ul :nth-child(odd)&#39;).css(&#39;color&#39;, &#39;green&#39;) //奇数行为绿色文本

5.:nth-last-child(): Berechnet die Position in umgekehrter Reihenfolge

$(&#39;ul :nth-last-child(2)&#39;).css(&#39;color&#39;, &#39;red&#39;)  //倒数第2个,即第9位
$(&#39;ul :nth-last-child(even)&#39;).css(&#39;color&#39;, &#39;red&#39;)  //倒序开始选择偶数位置

6.:first-child: Das erste untergeordnete Element des übergeordneten Elements element

$(&#39;ul :first-child&#39;).css(&#39;color&#39;, &#39;red&#39;)

7.:last-child: Das letzte untergeordnete Element des übergeordneten Elements

$(&#39;ul :last-child&#39;).css(&#39;color&#39;, &#39;red&#39;)

8.:only-child: Das einzige untergeordnete Element des übergeordneten Elements

$(&#39;ul :only-child&#39;).css(&#39;color&#39;, &#39;red&#39;)

9. nth-of-type() gibt, ähnlich wie nth-child(), nur Elemente desselben Typs zurück

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>在同级元素之间定位</title>
</head>
<body>
<!-- <ul>
<li>php中文网(www.php.cn)</li>
</ul> -->
<ul>
<li>列表项01</li>
<li>列表项02</li>
<li>列表项03</li>
<li>列表项04</li>
<li>列表项05</li>
<li>列表项06</li>
<li>列表项07</li>
<li>列表项08</li>
<li>列表项09</li>
<li>列表项10</li>
</ul>
<button>运行</button>
</body>
</html>

Das obige ist der detaillierte Inhalt vonCSS-Positionierung zwischen Geschwisterelementen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：

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

Vorheriger Artikel：Einfacher CSS-Selektor auf SelektorebeneNächster Artikel：Einfacher CSS-Selektor auf Selektorebene

In Verbindung stehende Artikel

Mehr sehen