Explication détaillée des sélecteurs de base en CSS et discussion sur la priorité des sélecteurs
青灯夜游
Libérer: 2022-08-31 19:13:21
avant
13084 Les gens l'ont consulté
Cet article vous présentera les cinq sélecteurs de base de CSS : sélecteur d'élément, sélecteur de classe, sélecteur d'identifiant, sélecteur de caractères génériques, sélecteur d'attribut, et parlera de la priorité de ces sélecteurs de base. J'espère que cela sera utile à tout le monde.
L'environnement d'exploitation de ce tutoriel : système Windows 7, version CSS3&&HTML5, ordinateur Dell G3.
Qu'est-ce qu'un sélecteur ? La fonction d'un sélecteur CSS est de positionner un ou plusieurs éléments d'une page HTML selon les règles CSS. Lorsque le navigateur analyse la page HTML, il localise les éléments de la page HTML en fonction des sélecteurs des règles CSS et définit les styles pour les éléments correspondants. [Apprentissage recommandé : Tutoriel vidéo CSS]
En tant qu'épine dorsale du CSS, le sélecteur CSS fonctionne comme la colonne vertébrale humaine, interdépendant et interactif avec la structure THML, le comportement du navigateur et le comportement de l'utilisateur, ce qui conduit au sélecteur CSS. partie très importante. Le « sélecteur » fait ici référence à l'étiquette, au nom de la classe, etc. devant le bloc de déclaration CSS couramment utilisé. Comme indiqué dans le code suivant :
div {
color: lightcoral;
font-size: 24px;
}
Copier après la connexion
Le div ici est un sélecteur.
Classification des sélecteurs
CSS s'est développé de la première version à la troisième version, ce qui a rendu les types de sélecteurs CSS de plus en plus complexes. Actuellement, la classification des sélecteurs CSS est la suivante :
Sélecteurs de base : il existe 5 sélecteurs de base, qui constituent l'utilisation la plus basique des sélecteurs CSS.
Sélecteur de niveau : il existe 4 sélecteurs de niveau, qui localisent les éléments HTML en fonction de la relation entre les éléments HTML.
Sélecteur combiné : Il a deux utilisations : intersection et union. C'est une combinaison du sélecteur de base précédent et du sélecteur hiérarchique.
Sélecteur de pseudo-classe : permet de sélectionner des éléments HTML dont les informations d'état ne sont pas incluses dans la page HTML.
Sélecteur de pseudo-éléments : localisez toutes les entités qui ne contiennent pas de HTML.
Voyons maintenant d'abord les sélecteurs de base, et d'autres sélecteurs seront présentés plus tard. Sélecteur de base
Sélectionnez tous les éléments
Sélecteur de classe.mystyle {color:red;}
Sélectionnez tous les éléments de balise avec class='mystyle'
id selector
#myid {color:red;}
Sélectionnez tous les éléments de balise avec id="myid"
Sélecteur universel/sélecteur générique
*myid {color:red;}
Sélectionner tous les éléments
Sélecteur d'attribut
[id] {color :red;}
Sélectionnez tous les éléments d'attribut d'identifiant
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