Positionnement CSS entre les éléments frères

Positionnement CSS entre les éléments frères

* Remarque :

* 1. Le sélecteur natif CSS est le plus rapide pour trouver des éléments

* 2. Le sélecteur personnalisé commence par :, qui ressemble beaucoup à la pseudo-classe en CSS

* 3. Le sélecteur personnalisé est positionné en fonction de la position trouvée à l'aide du sélecteur natif

* 4. Utilisez autant que possible les sélecteurs natifs autant que possible pour obtenir des éléments

1.:nth-child(n) : le css est calculé à partir de 1

$('ul :nth-child(2)').css('color', 'red')

2.:nth-child(2n ) : sélectionnez tous les numéros pairs elements (n=[1,2,3,...])

$('ul :nth-child(2n)').css('color', 'red')

3.:nth-child(2n+1) : Sélectionnez tous les éléments impairs (n=[0,1 ,2,...])

$('ul :nth-child(2n+1)').css('color', 'red')

4.:nth-child(even) : récupère l'élément de position pair ; nth-child(odd) : récupère l'élément de position impair

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

5.:nth-last-child() : Calcule la position dans l'ordre inverse

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

6.:first -child :Le premier élément enfant de l'élément parent

$('ul :first-child').css('color', 'red')

7 :last-child : Le dernier élément enfant de l'élément parent

$('ul :last-child').css('color', 'red')

8. : L'élément parent Le seul élément enfant dans

$('ul :only-child').css('color', 'red')

9.nth-of-type(), similaire à nth-child(), ne renvoie que des éléments du même type

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!