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

Introduction à la différence entre :nth-child et :nth-of-type dans les sélecteurs CSS3

黄舟
Libérer: 2017-10-27 09:51:17
original
1783 Les gens l'ont consulté

1. :nth-child

1.1 Description

<p>:nth-child(n) le sélecteur correspond au Nième élément enfant qui appartient à son élément parent, quel que soit du type d'élément. n peut être un nombre, un mot-clé ou une formule.

<p>Remarque : Si le Nième sous-élément est différent du type d'élément sélectionné, le style sera invalide !

1.2 Exemple

<style>
p>p:nth-child(2){
    color:red;
}
</style>
<p>
    <p>我是第1个段落</p>
    <p>我是第2个段落</p><!--符合条件:1、是<p>元素,2、父元素<p>的第二个元素。这里被选择,会变成红色。-->
    <p>我是第3个段落</p>
</p>
<p>
    <p>我是第1个段落</p>
    <span>我是第1个文本</span><!--不符合条件:不是<p>元素,没有被选择-->
    <p>我是第2个段落</p>
</p>
Copier après la connexion

1.3 Amélioration

<p>Si vous souhaitez que le deuxième <span> ci-dessus prenne effet, vous pouvez supprimer la sélection de l'élément enfant <p> et écrivez à un parent Ajoutez un espace à l'élément <p> pour éviter que :nth-child ne prenne effet.

<style>
p :nth-child(2){ //p+空格,只根据父元素选择
    color:red;
}
</style>
<p>
    <p>我是第1个段落</p>
    <span>我是第1个文本</span><!--符合条件-->
    <p>我是第2个段落</p>
</p>
Copier après la connexion

2. :nth-of-type(n) correspondant au sélecteur appartient à Chaque élément du Nième élément enfant d'un type spécifique de l'élément parent. n peut être un nombre, un mot-clé ou une formule.

2.2 Exemple

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