Le sélecteur de nom de classe est-il nouveau dans CSS3 ?

WBOY
Libérer: 2022-06-20 15:48:46
original
1408 Les gens l'ont consulté

Le sélecteur de nom de classe n'est pas nouveau dans CSS3. Le sélecteur de nom de classe est utilisé pour sélectionner des éléments avec des classes spécifiées. La syntaxe est ".class{css code;}" ; le sélecteur de nom de classe a été démarré avant CSS3. n'est pas nouveau dans CSS3. Les nouveaux sélecteurs dans CSS3 incluent des sélecteurs d'attributs, des sélecteurs de pseudo-classes structurelles, etc.

Le sélecteur de nom de classe est-il nouveau dans CSS3 ?

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

Sélecteur de nom de classe

Sélecteur de classe

Utilisez l'attribut class pour appeler la classe class

Par exemple :

 <p class="one">类选择器</p>
Copier après la connexion
 .one {
       color: yellow;
        }
Copier après la connexion

Le nom de classe de balise p ici s'appelle one, et CSS utilise .+one lors de l'ajout de styles à il (son nom de classe) sélectionné par lui, c'est le sélecteur de classe.

Connaissances étendues : nouveau sélecteur CSS3

Sélecteur d'attribut

  • input[value] { } (entrée et a un attribut de valeur)

  • input[type=text] {} {attributs de l'entrée La valeur de le texte doit être modifié}

  • div[class^=icon] { } (Sélectionnez d'abord les éléments qui sont div, puis ont des attributs de classe et les valeurs d'attribut doivent commencer par une icône)

  • section[class$ = data] {} (sélectionnez le nom de la classe se terminant par data)

sélecteur de pseudo-classe structurelle

  • ul li:first-child {} (sélectionnez le premier enfant li dans ul)

  • ul li :last-child { } (sélectionnez le dernier enfant li dans ul)

  • ul li:nth-child(2) { } (sélectionnez le deuxième enfant li dans ul)

  • ul li:nth-child( 6) { } (Sélectionnez le sixième enfant li dans ul)

  • ul li:ntième enfant (pair/2n) { } (Sélectionnez tous les enfants pairs)

  • ul li:ntième enfant (impair /2n+1) { } (Sélectionnez tous les enfants avec des nombres impairs)

  • ol li:nth-child(n) { } (Commencez à partir de 0 Chaque fois que vous ajoutez 1, le calcul en arrière doit être n. Il ne peut pas être d'autres lettres. Sélectionnez tous les enfants

  • ul li:nth-child(n+5) { } (sélectionnez à partir du cinquième enfant)

  • ul li:nth-child(-n+5) { } (Sélectionnez en comptant à partir du cinquième enfant)

  • ul li:first-of-type { } (Premier enfant)

  • ul li:last-of-type { } (dernier enfant)

  • ul li:nth-of-type(even) { } (even child)

  • section div:nth-child(1) { } (le nth-child organisera toutes les cases avec des numéros de série. Lors de l'exécution, regardez d'abord : nth-child(1) puis revenez en arrière et regardez le div précédent)

  • section div:nth-of-type(1) { } (nth -of-type organisera les cases de l'élément spécifié dans séquence ; lors de l'exécution, regardez d'abord l'élément spécifié par le div puis revenez en arrière et regardez : nième de type (1) nombre d'enfants)

Sélecteur de pseudo-élément (dans la page Introuvable, souvent utilisé pour les balises de police) [Identique au sélecteur de balises, le poids est de 1]

  • ::before Insérer du contenu devant l'élément (devant l'intérieur de la boîte parent)

  • ::after dans Insérer du contenu après l'élément (derrière l'intérieur de la boîte parent)

  • doit avoir l'attribut content

  • div::after { content: 'I';}

  • .tudou:hover::before { } (Lorsque notre souris passe sur la boîte de pommes de terre, laissez le calque de masque avant à l'intérieur s'afficher)

  • Les pseudo-éléments s'effacent et flottent

(Partage vidéo d'apprentissage : Tutoriel vidéo CSS, Tutoriel vidéo HTML)

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:
css
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