Apprentissage des sélecteurs CSS : parlons des sélecteurs composés (introduction détaillée)

Cet article vous donnera une introduction détaillée au sélecteur composite en CSS. Découvrez le sélecteur d'intersection, le sélecteur composite d'union, le sélecteur hiérarchique, le sélecteur de pseudo-classe et de pseudo-élément et le sélecteur d'attribut en CSS.

1. Sélecteur d'intersection

• Également connu sous le nom de sélecteur spécifique aux balises

• Fonction : Sélectionnez le contenu qui correspond à deux balises en même temps

• Format : 1. Par deux Composition du sélecteur, le premier est le sélecteur d'étiquette, le second est le sélecteur de classe ou le sélecteur d'identifiant ; 2. Il ne peut y avoir d'espace entre les deux sélecteurs

• Par exemple : le professeur a demandé à sa classe Tous les élèves du milieu l'école se teigne les cheveux en rouge

div.student{
				color: red;
}

2. Sélecteur composé d'union

• Fonction : Définir le même style pour tous les sélecteurs sélectionnés

• Format : Chaque sélecteur passe

  virgule Connecté

• Remarque : N'importe quel sélecteur peut être utilisé dans le cadre du sélecteur syndical (la tolérance est plus grande)

• Par exemple : le directeur exige que le slogan de l'école, tous les enseignants et Guo Yue ne puissent écrire qu'en style Song à l'avenir

p.slogn,.teacher,#gy{
				font-family: "宋体";
}

3. Sélecteur de niveau

1. Composeur d'éléments descendants

• Fonction : Sélectionnez les descendants d'un certain élément

• Format : L'étiquette extérieure est écrite devant, Les étiquettes intérieures sont écrites. à l'arrière, séparés par des espaces

• Par exemple : les descendants de Yu Gong veulent se teindre les cheveux collectivement

#yuGong .people{
   			color: red;
   		}

• Remarque : à cette époque, parmi les descendants de Yu Gong

  tous les descendants du peuple se teindront les cheveux , y compris le fils, le petit-fils, l'arrière-petit-fils de Yu Gong...

2. Sélecteur composite d'élément enfant

• Fonction : Sélectionnez l'élément qui est l'élément enfant (fils) d'un certain élément

• Format : L'étiquette parent est écrite devant, l'étiquette enfant est écrite derrière, et le milieu est relié par >

• Par exemple : les fils de Yugong veulent se teindre les cheveux collectivement

#yuGong>.people{
   			color: red;
}

• Remarque : à l'heure actuelle, tous les

  fils du peuple Yugong dans les descendants se teindront les cheveux. Le petit-fils et l'arrière-petit-fils de Yugong ne se teignent pas les cheveux car ils sont encore jeunes Seuls les éléments enfants (fils biologiques) seront sélectionnés ici.

3. Sélecteur de frères proches

• Fonction : Sélectionnez un élément immédiatement après un autre élément, et les deux ont le même élément parent

• Format : Le sélecteur utilise le signe plus "+" pour lier les deux sélecteurs avant et après. Les deux éléments du sélecteur ont

  le même père, et le deuxième élément doit suivrele premier élément

• Par exemple : le troisième enfant parmi les sept frères gourdes veut se teindre les cheveux (utilisez le deuxième enfant pour localiser le troisième enfant)

#secondBaby+#thirdBaby{
   			color: red;
}

4. Sélecteur de frères et sœurs ordinaires

• Fonction : Sélectionnez un élément qui est au même niveau qu'un autre élément, et les deux ont le même élément parent

• Format : utilisez "~" Pour lier les deux sélecteurs avant et après. Les deux éléments du sélecteur ont

  le même parent, mais le deuxième élément n'est pas obligé de suivre le premier élément.

• Par exemple : Le troisième enfant parmi les Sept Frères Calabash veut se teindre les cheveux (utilisez le grand enfant pour localiser le troisième enfant)

#bigBaby~#thirdBaby{
   			color: red;
}

4. Pseudo-classe et sélecteur de pseudo-éléments

.

0. Qu'est-ce que "pseudo" ?

• "Pseudo" signifie que le sélecteur sert à modifier des parties qui ne sont pas dans l'arborescence du document.

• À lire absolument : http://www.alloyteam.com/2016/05/summary-of-pseudo-classes-and-pseudo-elements/#prettyPhoto

1.

Fonction : Utilisé pour ajouter des styles correspondants aux éléments existants lorsqu'ils sont dans un certain état. Cet état change dynamiquement en fonction du comportement de l'utilisateur.
Ce qui suit présente uniquement les
• pseudo-classes de statut qui ne sont pas expliquées en détail ci-dessus

1) lien

Fonction : Définir le style non visité de cet élément (lien hypertexte)
Format :

• a:link{...}

2) visité

Fonction : Définir le style visité de l'élément (hyperlien)
Format :

• a:visited{...}

3) survol

Fonction : Définit le style de l'élément au survol de la souris
Format :

• a:hover{...}

4) activer

Fonction : Définit le style de l'activité de l'élément (souris appuyée)
Format :

• a:active{...}

5) focus

Fonction : Définir le style de l'élément pour obtenir le focus
Format :

• a:focus{...}

Remarque

: N'inversez pas l'ordre des pseudo-classes , suivez l'ordre link-visited-hover -Active, sinon des erreurs peuvent survenir

2.

• Fonction : Utilisé pour créer des éléments qui ne sont pas dans l'arborescence du document et leur ajouter des styles.

选择器	作用	格式
::first-letter	选取选择器的首字母	p::first-letter
::first-line	选取选择器的首行	p::first-line
::before	在选择器前增加内容，使用 content 属性来指定要插入的内容。（被插入的内容实际上不在文档树中）	p::before{content: "hello ";}
::after	在选择器后增加内容，使用 content 属性来指定要插入的内容。（被插入的内容实际上不在文档树中）	p::after{content: "hello ";}
::selection	匹配被用户选中或者处于高亮状态的部分	p::selection

5. Sélecteur d'attributs

选择器	作用	格式
E[att^=value]	表示E标签的att属性值是以’value’开头的	p[id^=‘yuan’]{color: red;}
E[att$=value]	表示E标签的att属性值是以’value’结尾的	p[id$=‘chao’]{ color: blue;}
E[att*=value]	表示E标签的att属性值中包含’value’字符串	p[class*=‘shi’]{font-size: 35px;}

Pour plus de connaissances liées à la programmation, veuillez visiter : Introduction à la programmation ! !

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!