CSS-Positionierung zwischen Geschwisterelementen-CSS-Tutorial-php.cn

CSS-Positionierung zwischen Geschwisterelementen

无忌哥哥

Freigeben： 2018-06-29 15:26:21

Original

5628 Leute haben es durchsucht

CSS-Positionierung zwischen Geschwisterelementen

* 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;)

Nach dem Login kopieren

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;)

Nach dem Login kopieren

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;)

Nach dem Login kopieren

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;) //奇数行为绿色文本

Nach dem Login kopieren

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;)  //倒序开始选择偶数位置

Nach dem Login kopieren

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

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

Nach dem Login kopieren

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

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

Nach dem Login kopieren

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

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

Nach dem Login kopieren

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>

Nach dem Login kopieren

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!