Maison interface Web tutoriel CSS Quelle est l'utilité du sélecteur de classe en CSS

Quelle est l'utilité du sélecteur de classe en CSS

Nov 20, 2020 am 11:30 AM
css sélecteur de classe

Le but des sélecteurs de classe en CSS est de permettre de spécifier des styles d'une manière indépendante des éléments du document. Les sélecteurs de classe peuvent être utilisés seuls ou en combinaison avec d'autres éléments. Avant d'utiliser les sélecteurs de classe, le balisage spécifique du document doit être modifié afin que les sélecteurs de classe fonctionnent correctement.

Quelle est l'utilité du sélecteur de classe en CSS

Le rôle du sélecteur de classe CSS : permet de spécifier des styles de manière indépendante des éléments du document.

Ce sélecteur peut être utilisé seul ou en combinaison avec d'autres éléments.

(Partage vidéo d'apprentissage : tutoriel vidéo CSS)

Remarque : Ces sélecteurs ne peuvent être utilisés qu'après que le document a été marqué de manière appropriée, donc l'utilisation de ces deux sélecteurs est généralement Cela demande d’abord un peu de réflexion et de planification.

Pour appliquer des styles quel que soit l'élément de conception spécifique, la méthode la plus courante consiste à utiliser un sélecteur de classe.

Exemple :

Modifier le code HTML

Avant d'utiliser le sélecteur de classe, vous devez modifier le balisage spécifique du document afin que le sélecteur de classe puisse fonctionner correctement.

Afin d'associer le style d'un sélecteur de classe à un élément, la classe doit être spécifiée comme valeur appropriée. Jetez un œil au code HTML suivant :

<h1 class="important">
This heading is very important.
</h1>

<p class="important">
This paragraph is very important.
</p>
Copier après la connexion

Dans le code ci-dessus, la classe de deux éléments est spécifiée comme importante : le premier titre (élément h1) et le deuxième paragraphe (élément p).

Syntaxe :

On utilise ensuite la syntaxe suivante pour appliquer des styles à ces éléments classés, soit un point (.) avant le nom de la classe, combiné à un sélecteur de caractère générique :

*.important {color:red;}
Copier après la connexion

Si vous souhaitez uniquement sélectionner tous les éléments portant le même nom de classe, vous pouvez ignorer le sélecteur de caractère générique dans le sélecteur de classe sans aucun effet indésirable :

.important {color:red;}
Copier après la connexion

Recommandations associées : Tutoriel CSS

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

Article chaud

R.E.P.O. Crystals d'énergie expliqués et ce qu'ils font (cristal jaune)
2 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
Repo: Comment relancer ses coéquipiers
4 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Adventure: Comment obtenir des graines géantes
3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
Combien de temps faut-il pour battre Split Fiction?
3 Il y a quelques semaines By DDD

Article chaud

R.E.P.O. Crystals d'énergie expliqués et ce qu'ils font (cristal jaune)
2 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
Repo: Comment relancer ses coéquipiers
4 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Adventure: Comment obtenir des graines géantes
3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
Combien de temps faut-il pour battre Split Fiction?
3 Il y a quelques semaines By DDD

Tags d'article chaud

Bloc-notes++7.3.1

Bloc-notes++7.3.1

Éditeur de code facile à utiliser et gratuit

SublimeText3 version chinoise

SublimeText3 version chinoise

Version chinoise, très simple à utiliser

Envoyer Studio 13.0.1

Envoyer Studio 13.0.1

Puissant environnement de développement intégré PHP

Dreamweaver CS6

Dreamweaver CS6

Outils de développement Web visuel

SublimeText3 version Mac

SublimeText3 version Mac

Logiciel d'édition de code au niveau de Dieu (SublimeText3)

Que signifie l'espace réservé en vue Que signifie l'espace réservé en vue May 07, 2024 am 09:57 AM

Que signifie l'espace réservé en vue

Comment écrire des espaces dans vue Comment écrire des espaces dans vue Apr 30, 2024 am 05:42 AM

Comment écrire des espaces dans vue

Comment avoir dom en vue Comment avoir dom en vue Apr 30, 2024 am 05:36 AM

Comment avoir dom en vue

Que signifie span en js Que signifie span en js May 06, 2024 am 11:42 AM

Que signifie span en js

Que signifie rem en js Que signifie rem en js May 06, 2024 am 11:30 AM

Que signifie rem en js

Comment introduire des images dans vue Comment introduire des images dans vue May 02, 2024 pm 10:48 PM

Comment introduire des images dans vue

Quelle est la fonction de la balise span Quelle est la fonction de la balise span Apr 30, 2024 pm 01:54 PM

Quelle est la fonction de la balise span

Comment envelopper l'invite dans js Comment envelopper l'invite dans js May 01, 2024 am 06:24 AM

Comment envelopper l'invite dans js

See all articles