Sélecteur de classe (sélecteur CSS)

Syntaxe

.className {
declaration block
}

Description

La sélection d'éléments sur la base de leurs noms de classe est une technique très courante dans CSS. La syntaxe du sélecteur d'attribut [classe ~ = "avertissement"] est plutôt gênante, mais heureusement, il y a une forme plus simple et plus courte pour cela: le sélecteur de classe. Voici un exemple simple qui sélectionne tous les éléments avec un attribut de classe qui contient la valeur «avertissement»:

.warning {
  ⋮ <span>declarations
</span>}

Cet exemple illustre également l'utilisation d'un sélecteur universel implicite - il est équivalent à *. Notez que les caractères de l'espace blanc ne peuvent pas apparaître après la période, ou entre un sélecteur de type élément, ou un sélecteur universel explicite, et la période. Par exemple, le sélecteur suivant correspondra à tous les éléments P avec un attribut de classe qui contient la valeur «AVERTISSEMENT «:

p.warning {
  ⋮ <span>declarations
</span>}

Un sélecteur simple peut contenir plus d'un sélecteur d'attributs et / ou du sélecteur de classe; Dans de tels cas, le modèle de sélecteur correspond aux éléments dont les attributs contiennent tous les composants spécifiés. Voici un exemple:

div.foo.bar {
  ⋮ <span>declarations
</span>}
div.foo.bar[title^="Help"] {
  ⋮ <span>declarations
</span>}

Le premier exemple de sélecteur ci-dessus correspond aux éléments div dont la valeur d'attribut de classe contient à la fois les mots "foo" et "bar". Le deuxième exemple de sélecteur correspond aux éléments div dont les valeurs d'attribut de classe contient les deux mots "foo" et "bar", et dont les valeurs d'attribut de titre commencent par la chaîne "Aide". Pour clarifier davantage le HTML qui correspondrait aux sélecteurs CSS ci-dessus pourrait être le suivant:

<div>Matches first example</div>
<div title="Help">Matches second example</div>

Exemple

Le sélecteur suivant correspondra à tous les éléments P avec un attribut de classe qui contient la valeur "Intro":

p.intro {
  ⋮ <span>declarations
</span>}

Des questions fréquemment posées sur les sélecteurs de classe CSS

Quelle est la signification d'un sélecteur de classe CSS?

Un sélecteur de classe CSS est un nom attribué à un style spécifique dans un fichier CSS. Il joue un rôle crucial dans le développement Web car il permet aux développeurs d'appliquer le même style à plusieurs éléments HTML. Cela garantit non seulement la cohérence dans la conception, mais permet également de gagner du temps car les développeurs n'ont pas à écrire le même code à plusieurs reprises. Les sélecteurs de classe sont définis avec une période suivie du nom de classe. Par exemple, .intro {Color: Blue;}. Dans ce cas, «intro» est le sélecteur de classe.

Comment utiliser un sélecteur de classe CSS dans HTML?

Pour utiliser un sélecteur de classe CSS dans HTML, vous devez affecter la classe Nom de l'élément HTML à l'aide de l'attribut «classe». Par exemple, si vous avez un sélecteur de classe nommé «Intro» dans votre fichier CSS, vous pouvez l'appliquer à un paragraphe en html comme ceci:

Il s'agit d'un paragraphe d'introduction.

. Le style défini dans la classe «intro» sera appliqué à ce paragraphe.

Puis-je utiliser plusieurs sélecteurs de classe pour un seul élément HTML?

Oui, vous pouvez utiliser plusieurs sélecteurs de classe pour un seul élément HTML. Il vous suffit de séparer chaque nom de classe avec un espace dans l'attribut «classe» dans HTML. Par exemple,

Il s'agit d'un paragraphe d'introduction en surbrillance.

. Dans ce cas, les styles définis dans les classes «intro» et «saillante» seront appliqués au paragraphe.

Quelle est la différence entre les sélecteurs de classe et les sélecteurs d'ID dans CSS?

La principale différence entre les sélecteurs de classe et les sélecteurs d'ID dans CSS réside dans leur utilisation. Bien qu'un sélecteur de classe puisse être utilisé pour styliser plusieurs éléments HTML, un sélecteur d'ID est utilisé pour styliser un seul élément unique. De plus, les sélecteurs de classe sont définis avec une période (.) Avant le nom de classe, tandis que les sélecteurs d'ID sont définis avec un hachage (#) avant le nom d'ID.

Puis-je utiliser des sélecteurs de classe CSS avec d'autres sélecteurs?

Oui, les sélecteurs de classe CSS peuvent être combinés avec d'autres sélecteurs pour cibler des éléments spécifiques. Par exemple, vous pouvez utiliser un sélecteur de classe avec un sélecteur d'élément pour styliser un type d'élément spécifique au sein d'une classe. Par exemple, P.intro {Color: Blue;} n'appliquera le style qu'aux éléments de paragraphe au sein de la classe «intro».

Que se passe-t-il si j'ai des styles contradictoires dans mes sélecteurs de classe CSS?

S'il existe des styles contradictoires dans vos sélecteurs de classe CSS, le navigateur suivra la spécificité et les règles d'héritage CSS pour résoudre le conflit. En général, le style défini plus loin dans le fichier CSS remplacera le précédent. Cependant, les sélecteurs plus spécifiques auront une priorité plus élevée.

Comment puis-je remplacer les styles dans les sélecteurs de classe CSS?

Vous pouvez remplacer les styles dans les sélecteurs de classe CSS en définissant un nouveau style plus tard dans le CSS dans le CSS fichier ou utiliser des sélecteurs plus spécifiques. Une autre façon consiste à utiliser la règle «importante». En ajoutant «! IMPORTANT» Après un style, vous pouvez lui donner une priorité plus élevée. Cependant, utilisez cette règle avec parcimonie car elle peut rendre votre CSS difficile à gérer.

Puis-je utiliser des sélecteurs de classe CSS dans JavaScript?

Oui, vous pouvez utiliser des sélecteurs de classe CSS dans JavaScript pour manipuler HTML Éléments. La méthode «document.getElementsByClassName ()» vous permet de sélectionner des éléments avec un nom de classe spécifique. Vous pouvez ensuite modifier leurs styles, contenu ou attributs en utilisant diverses méthodes JavaScript.

Y a-t-il des conventions de dénomination pour les sélecteurs de classe CSS?

Alors que CSS n'applique pas de conventions de dénomination strictes pour la classe Sélecteurs, c'est une bonne pratique d'utiliser des noms descriptifs et concis. De plus, les noms de classe sont sensibles à la casse et ne doivent pas commencer par un nombre. Vous pouvez utiliser des traits de traits (-) ou des soulignements (_) pour séparer les mots dans un nom de classe.

Puis-je utiliser des sélecteurs de classe CSS dans une conception réactive?

Oui, les sélecteurs de classe CSS peuvent être utilisés dans la conception réactive pour appliquer différents styles en fonction de la taille ou de l'appareil de l'écran. En combinant des sélecteurs de classe avec des requêtes multimédias, vous pouvez créer une disposition réactive qui s'adapte à différents environnements de visualisation.

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!