Maison > interface Web > tutoriel CSS > le corps du texte

Positionnement CSS entre les éléments frères

无忌哥哥
Libérer: 2018-06-29 15:26:21
original
5638 Les gens l'ont consulté

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')
Copier après la connexion

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

$('ul :nth-child(2n)').css('color', 'red')
Copier après la connexion

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

$('ul :nth-child(2n+1)').css('color', 'red')
Copier après la connexion

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

$(&#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;) //奇数行为绿色文本
Copier après la connexion

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

$(&#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;)  //倒序开始选择偶数位置
Copier après la connexion

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

$(&#39;ul :first-child&#39;).css(&#39;color&#39;, &#39;red&#39;)
Copier après la connexion
7 :last-child : Le dernier élément enfant de l'élément parent

$(&#39;ul :last-child&#39;).css(&#39;color&#39;, &#39;red&#39;)
Copier après la connexion
8. : L'élément parent Le seul élément enfant dans

$(&#39;ul :only-child&#39;).css(&#39;color&#39;, &#39;red&#39;)
Copier après la connexion
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!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal