Quels sont les sélecteurs en CSS ? Connaissez-vous l’ordre de priorité des sélecteurs ?

En tant qu'ingénieur front-end, vous n'êtes pas étranger aux sélecteurs CSS. Les sélecteurs sont une partie essentielle de notre mise en page. Alors, savez-vous ce que sont les sélecteurs en CSS ? Quel est l'ordre de priorité des sélecteurs CSS ? Ce n'est que lorsque vous connaîtrez les secrets que vous pourrez être plus à l'aise au travail. Parlons ensuite des sélecteurs CSS et de leur ordre de priorité.

1. Que sont les sélecteurs CSS ?

Il existe de nombreux sélecteurs en CSS, tels que : le sélecteur d'ID, le sélecteur de classe, le sélecteur de caractères génériques, le sélecteur de pseudo-classe Attendez. , présentons principalement quelques-uns ceux couramment utilisés.

1. Sélecteur de balise

Syntaxe : nom de la balise {}, par exemple : h1{} // Définir les styles pour tous les éléments h1.

2. Sélecteur d'ID

Syntaxe : #id name{} //La valeur de l'identifiant doit être unique et ne peut pas être répétée, par exemple : #top{} //Définissez le style de l'élément avec l'identifiant de top.

3. Sélecteur de classe

Syntaxe : .class{}, par exemple : .box{} //Définissez les styles pour tous les éléments dont la valeur de classe est box.

4. Sélecteur de groupe

Syntaxe : sélecteur 1, sélecteur 2, sélecteur N{}, par exemple : #box1,.box2,p{} //L'identifiant est box1 , la classe définit le style pour les éléments de box2 et p ensemble.

5. Sélecteur de caractères génériques

Syntaxe : *{}, par exemple : *{font-size : 16px} //Définissez la taille de la police de la page entière sur 16px.

6. Sélecteur descendant

Syntaxe : Sélecteur 1 Sélecteur 2{}, par exemple : p .aa{} //Sélectionne le descendant spécifié .aa de l'élément ancêtre spécifié p.

7. Sélecteur d'élément enfant

Syntaxe : élément parent>élément enfant{}, par exemple : p>.box{} //Sélectionnez l'élément enfant spécifié .box de l'élément parent p. Notez la différence avec le sélecteur d'élément descendant

8. Sélecteur de pseudo-classe

La pseudo-classe peut être utilisée pour représenter certains états spéciaux, tels que :
 : lien - super lien non visité .
: visité - un lien hypertexte qui a été visité.
 : survol - l'élément survolé par la souris.
: actif - l'élément sur lequel on clique.

eg : a:hover{color:red} //Lorsque la souris passe l'étiquette a, la couleur passe au rouge.

2. Ordre de priorité des sélecteurs CSS

Lorsque différentes valeurs d'un même attribut sont appliquées au même élément, s'il y a un conflit entre les attributs définis , Donc, dont la valeur doit être utilisée, cette fois implique l'ordre de priorité du CSS.
1. Utiliser !important après un attribut remplacera le style d'élément défini n'importe où dans la page.
2. Style interne écrit comme attribut de style dans l'élément
3. Sélecteur d'ID
4. Sélecteur de balise
6. ou hérité

tri récapitulatif : !important > Style interne > Sélecteur de classe > Sélecteur de balises > Héritage >

Résumé : ce qui précède résume les sélecteurs couramment utilisés en CSS et leurs règles de syntaxe. Quant à l'ordre de priorité du sélecteur, seule la conclusion finale est donnée ici. Vous devez encore l'essayer vous-même. Il n'y aura pas de démonstration ici. J'espère que ce tutoriel pourra vous aider !

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!