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 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!