Maison >interface Web >Questions et réponses frontales >Qu'est-ce qu'un sélecteur de classe dans le front-end Web

Qu'est-ce qu'un sélecteur de classe dans le front-end Web

WBOY
WBOYoriginal
2022-08-24 16:31:253242parcourir

Le sélecteur de classe dans le front-end Web consiste à trouver le sélecteur avec cette balise de nom de classe dans la page via le nom de classe ; le sélecteur de classe est utilisé pour définir la même méthode de présentation pour une série de balises. est ".nom de classe { Nom de l'attribut css : valeur d'attribut ;} » ; où le nom de la classe peut être composé de chiffres, de lettres, de traits de soulignement et de traits de soulignement, mais il ne peut pas commencer par des chiffres ou des traits de soulignement.

Qu'est-ce qu'un sélecteur de classe dans le front-end Web

L'environnement d'exploitation de ce tutoriel : système Windows 10, version CSS3&&HTML5, ordinateur Dell G3.

Qu'est-ce qu'un sélecteur de classe dans le front-end Web ?

Le sélecteur de classe est utilisé pour définir la même méthode de présentation pour une série de balises. Où classValue est le nom du sélecteur de classe, qui est nommé par l'écrivain CSS lui-même.

Sélecteur de classe

Structure :

.类名 { css属性名:属性值; }

Fonction :

Trouvez toutes les balises avec ce nom de classe sur la page via le nom de la classe et définissez le style

Remarques :

  • Il y a un attribut de classe sur toutes les balises. La valeur de l'attribut de classe est appelée le nom de classe (semblable à un nom)

  • Le nom de classe peut être composé de chiffres, de lettres, de traits de soulignement et de traits de soulignement, mais il ne peut pas être composé de chiffres ou de traits de soulignement commençant par un tiret

  • Une étiquette peut avoir plusieurs noms de classe en même temps, séparés par des espaces

  • Les noms de classe peuvent être répétés et un sélecteur de classe peut sélectionner plusieurs étiquettes. en même temps

Quest-ce quun sélecteur de classe dans le front-end Web

Développer les connaissances

Quels sont les sélecteurs couramment utilisés sur le front-end Web ?

Le premier est le sélecteur d'étiquette, également appelé élément sélecteur. La forme de base du sélecteur de balises est la suivante : tagName{property:value}, où tagName est le nom de la balise et property est l'attribut CSS.

Le deuxième type est le sélecteur de classe. Le sélecteur de classe est utilisé pour définir la même méthode de présentation pour une série de balises. La syntaxe couramment utilisée est .classValue{property:value}. Où classValue est le nom du sélecteur de classe, qui est nommé par l'écrivain CSS lui-même.

Le troisième type est le sélecteur d'ID. Le sélecteur d'ID définit un élément HTML spécifique. Une seule balise ou élément dans une page Web utilise la valeur d'attribut d'un certain ID. Le format de syntaxe de base du sélecteur d'ID est le suivant :

#idValue{property:value}. où idValue est le nom du sélecteur d'ID, qui peut être écrit par le rédacteur CSS lui-même.

Le quatrième type est le sélecteur global Le sélecteur global fonctionne sur tous les éléments htmlz. Le format de syntaxe est : *{propery:value}. Parmi eux, "*" signifie qu'il fonctionne sur tous les éléments, property signifie l'attribut CSS et value signifie la valeur de l'attribut.

Le cinquième type est le sélecteur combiné, qui consiste à combiner plusieurs sélecteurs pour former un sélecteur composite, également appelé sélecteur combiné.

La sixième méthode consiste à hériter du sélecteur.La règle d'héritage est que la balise enfant hérite du sélecteur de la balise parent si elle n'est pas définie ; lorsque la balise enfant définit à plusieurs reprises l'instruction de la balise parent, le sélecteur de balise enfant ; est exécuté.

Le septième type est le sélecteur de pseudo-classe. Le sélecteur de pseudo-classe est principalement utilisé sur les étiquettes : il a quatre états : lien non visité (lien), lien visité (visité), lien activé (actif) et survol de la souris (Connect). flotter).

【Recommandations associées : tutoriel vidéo javascript, front-end web

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!

Déclaration:
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