Quels sont les sélecteurs de pseudo-classe en CSS3 et comment utiliser le sélecteur de pseudo-classe nth-child()

Les nouveaux attributs en CSS3 nous apportent beaucoup de commodité, comme le sélecteur de pseudo-classe nth-child(), mais il n'est pas supporté par les navigateurs IE6-8 et FF3.0, nth-of en CSS3 - type(n) (tel que nth-of-type(1)) est un sélecteur de classe spécial qui peut définir des titres et des paragraphes plus personnalisés. Cependant, actuellement nth-of-type(n) ne prend en charge que Firefox 3, Opera et certains navigateurs. comme Safari et Chrome.

:nth-child() sélectionne un ou plusieurs éléments enfants spécifiques d'un élément ; vous pouvez sélectionner de cette façon :

:nth- child(length);/ *Le paramètre est un nombre spécifique et la longueur est un entier*/

:nth-child(n);/*Le paramètre est n, n est calculé à partir de 0*/

: nth -child(n*length)/*Sélectionnez des multiples de n, n commence à partir de 0*/

:nth-child(n+length);/*Sélectionnez l'élément après la longueur qui est supérieur à la longueur*/

:nth-child(-n+length)/*Sélectionnez l'élément avant la longueur*/

:nth-child(n*length+1);/*Sélectionnez un élément sur deux* / /

Exemple :

li:nth-child(3){background:orange;}/*Définir l'arrière-plan du troisième li sur orange*/

li :nth-child(3n){background:orange;}/*Définir l'arrière-plan du 3ème, 6ème, 9ème,..., tous les multiples de li à orange*/

li:nth- child( n+3){background:orange;}/*Sélectionnez l'arrière-plan li derrière le troisième élément en orange*/

li:nth-child(-n+3){background:orange ;}/* Sélectionnez le li devant le troisième élément pour définir l'arrière-plan sur orange*/

li:nth-child(3n+1){background:orange;}/*Cette méthode permet d'obtenir la séparation L'effet de en sélectionnant un parmi plusieurs */

:fist-child sélectionne le premier élément enfant d'un élément

Exemple :

li:first -child { background: green;}/*Définir l'arrière-plan du premier li sur vert*/

:last-child sélectionne le dernier élément enfant d'un élément

Exemple :

li:last-child {background: green;}/*Définir l'arrière-plan du dernier li sur vert*/

:nth-last-child () Sélectionnez-en un ou des éléments enfants plus spécifiques d'un élément, en comptant à partir du dernier élément enfant de cet élément

:nth-last-child() sélecteur et le précédent:nth -child() est très similaire, sauf que il y a un dernier supplémentaire ici, donc sa fonction est différente du précédent ":nth-child". Il suffit de compter à partir du dernier élément pour sélectionner un élément spécifique.

Exemple :

li:nth-last-child(4) {background: red;}/*Définir l'arrière-plan du quatrième dernier li sur rouge*/

:nth-of-type() sélectionne l'élément spécifié

:nth-of-type est similaire à:nth-child, sauf qu'il ne compte que celui spécifié dans le sélecteur Element , en fait, nos exemples précédents spécifient tous des éléments spécifiques. Ce sélecteur est principalement utile pour localiser des éléments qui contiennent de nombreux types d'éléments différents. Par exemple, il y a de nombreux éléments p, éléments li, éléments img, etc. sous notre div.demo, mais il me suffit de sélectionner l'élément p et de laisser tous les autres éléments p avoir un style différent. Ensuite, nous pouvons simplement écrire : <.>

p:nth-of-type(even) {background-color: lime;}

En plus de définir n sur impair (nombre pair) ou pair (nombre impair), vous pouvez également set n est défini sur une expression, par exemple, nth-of-type(3n+2)

:nth-last-of-type() sélectionne l'élément spécifié et compte à partir du dernier élément

Inutile de dire que tout le monde peut imaginer ce sélecteur. Il s'utilise de la même manière que le précédent :nth-last-child, sauf qu'il fait référence au type d'élément.

Également dans IE6-8 et FF3.0 - les navigateurs ne prennent pas en charge ce sélecteur

 : le premier du type sélectionne le premier enfant similaire sous un élément parent Element

:last-of-type sélectionne le dernier élément enfant similaire d'un élément supérieur

:nth-of-type,:nth- last-of- ; type;:first-of-type et :last-of-type ne sont pas très significatifs en pratique. Les sélecteurs tels que :nth-child que nous avons mentionnés plus tôt peuvent réaliser cette fonction, mais si vous êtes intéressé, vous pouvez toujours le découvrir. Je pense personnellement que la valeur pratique n’est pas très grande. Ces déclarations sont uniquement à titre de référence.

 : enfant unique signifie qu'un élément est le seul élément enfant de son élément parent

Si je n'ai besoin que d'un seul élément p dans le temps, change le style de ce li, alors nous pouvons maintenant utiliser : only-child, tel que :

<ul>
<li>1</li>
<li>2</li>
</ul>
<ul>
<li>3</li>
</ul>

ul li {padding-left:10px;}

ul li:only-child { padding- left:15px>

 : only-of-type sélectionne un élément qui est le seul élément enfant du même type que son élément parent

représente un élément Il a de nombreux sous-éléments, et un seul d'entre eux est unique. Ensuite, nous pouvons utiliser cette méthode de sélection pour sélectionner le seul sous-élément, par exemple,

Si nous voulons sélectionner uniquement pour l'élément h2. ci-dessus, on peut écrire comme ceci,

<section>
<h2>伪类选择器的用法</h2>
<p>CSS3 伪类选择器only-of-type的用法</p>
<p>CSS3 伪类选择器only-of-type的用法</p>
</section>

h2:only-of-type{color:red;}

:empty Il n'y a pas de contenu dans l'élément sélectionné

:empty est utilisé pour sélectionner des éléments sans aucun contenu. Ici, aucun contenu ne signifie aucun contenu, même un espace. Par exemple, vous avez trois paragraphes, dont un n'a rien. voulez que ce p ne soit pas affiché, alors vous pouvez l'écrire comme ceci :

p:empty {display: none;}

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!