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

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.

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>

 .one {
       color: yellow;
        }

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!