Heim >Web-Frontend >CSS-Tutorial >CSS-Positionierung zwischen Geschwisterelementen
CSS-Positionierung zwischen Geschwisterelementen
- 无忌哥哥Original
- 2018-06-29 15:26:215660Durchsuche
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
$('ul :nth-child(2)').css('color', 'red')
2.:nth-child(2n): Wählen Sie alle gerade nummerierten Elemente aus ( n=[1,2,3,...])
$('ul :nth-child(2n)').css('color', 'red')
3.:nth-child(2n+1): Alle ungeradzahligen Elemente auswählen (n=[ 0,1,2,. ..])
$('ul :nth-child(2n+1)').css('color', 'red')
4.:nth-child(even): Holen Sie sich das gerade nummerierte Positionselement; nth-child(odd): Holen Sie sich das ungerade nummerierte Positionselement
$('ul :nth-child(even)').css('color', 'red') //偶数行为红色文本 $('ul :nth-child(odd)').css('color', 'green') //奇数行为绿色文本
5.:nth-last-child(): Berechnet die Position in umgekehrter Reihenfolge
$('ul :nth-last-child(2)').css('color', 'red') //倒数第2个,即第9位 $('ul :nth-last-child(even)').css('color', 'red') //倒序开始选择偶数位置
6.:first-child: Das erste untergeordnete Element des übergeordneten Elements element
$('ul :first-child').css('color', 'red')
7.:last-child: Das letzte untergeordnete Element des übergeordneten Elements
$('ul :last-child').css('color', 'red')
8.:only-child: Das einzige untergeordnete Element des übergeordneten Elements
$('ul :only-child').css('color', 'red')
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!