Comparaison simple du nième enfant et du nième de type

Le contenu de cet article est de comparer brièvement le nième enfant et le nième de type, afin que chacun puisse comprendre comment fonctionnent respectivement le nième enfant et le nième de type. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. J'espère qu'il vous sera utile.

nth-child() et nth-of-type() sont tous deux des sélecteurs de pseudo-classe CSS « ​​structurels » Ces sélecteurs de pseudo-classe nous permettent de sélectionner des éléments en fonction des informations contenues dans l'arborescence du document. ne peuvent généralement pas être représentés par d’autres sélecteurs simples.

Dans le cas de nth-child() et nth-of-type(), l'information supplémentaire est la position de l'élément dans l'arborescence du document par rapport à ses éléments parent et frères. Bien que ces deux pseudo-classes soient très similaires, elles fonctionnent de manières complètement différentes.

Comment fonctionne nth-child() ? La pseudo-classe

nth-child() est utilisée pour faire correspondre des éléments en fonction d'un nombre qui représente la position de l'élément parmi ses frères et sœurs. Plus précisément, le nombre représente le nombre de frères et sœurs qui existaient avant l'élément (moins 1) dans l'arborescence du document.

Ce nombre est représenté par la fonction a+b, où n est l'index et a et b sont tous les entiers que nous transmettons. Par exemple, pour sélectionner chaque élément, nous pouvons écrire l'un des éléments suivants :

:nth-child(1n+0) { /* 样式 */ }
:nth-child(n+0) { /* 样式 */ }
:nth-child(1n) { /* 样式 */ }

En plus d'utiliser cette fonction, nous pouvons également transmettre un entier, tel que : nth-child(1), ou le mot-clé défini, impair (nombre impair) ou pair (nombre pair). Ces mots-clés sont des alternatives à l'écriture de la notation d'une fonction qui sélectionne chaque élément pair ou impair.

:nth-child(odd) { /* 奇数元素的样式 */ }
:nth-child(2n+1) { /* 奇数元素的样式 */ }

:nth-child(even) { /* 偶数元素的样式 */ }
:nth-child(2n+0) { /* 偶数元素的样式 */ }

:nth-child(), lorsqu'il est utilisé seul, permet de prédire facilement quel élément sera sélectionné. Par exemple, utilisez cette balise :

<div class="example">
	<p>This is a <em>paragraph</em>.</p>
	<p>This is a <em>paragraph</em>.</p>
	<p>This is a <em>paragraph</em>.</p>
	<div>This is a <em>divider</em>.</div>
	<div>This is a <em>divider</em>.</div> <!-- 选择元素-->
	<p>This is a <em>paragraph</em>.</p>
	<p>This is a <em>paragraph</em>.</p>
	<div>This is a <em>divider</em>.</div>
	<p>This is a <em>paragraph</em>.</p>
	<div>This is a <em>divider</em>.</div>
</div>

Si nous voulons sélectionner le cinquième élément div, nous pouvons simplement écrire ce qui suit

.example :nth-child(5) { background: #ffdb3a; }

Cependant, des résultats inattendus peuvent survenir lorsqu'il existe plusieurs types d'éléments et que nous devons combiner la pseudo-classe :nth-child() avec un sélecteur de type ou de classe. Par exemple, pour sélectionner à nouveau le même élément div, nous pourrions essayer d'écrire ce qui suit :

.example div:nth-child(2) { background: #ffdb3a; }

Ce code ne fonctionne pas ! La raison pour laquelle

ne fonctionne pas est que l'élément ciblé par le sélecteur n'existe pas réellement. À l'aide du sélecteur ci-dessus, les étapes suivantes seront effectuées

1. Sélectionnez tous les éléments enfants de .example

2 Recherchez le deuxième élément de la liste, quel que soit son type

nth-of-type().

Comment fonctionne nth-of-type() ?

.example p:nth-of-type(odd) { background: #ffdb3a; }

<🎜. > Par conséquent, nous pouvons maintenant sélectionner la deuxième div de .example, qui est le cinquième enfant :

.example div:nth-of-type(2) { /* 样式 */ }

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!