Exemples détaillés d'utilisation des sélecteurs de classe en CSS

En CSS, le sélecteur de classe consiste à ajouter un point devant le nom de la classe, s'il y a plusieurs classes, au lieu d'ajouter plusieurs points, ce sera sous la forme .important.urgent.

Sélecteur de classe
En CSS, le sélecteur de classe est affiché avec un point :

    .center {text-align: center}

Dans l'exemple ci-dessus, tous les éléments HTML avec la classe centrale sont centrés.
Dans le code HTML ci-dessous, les éléments h1 et p ont la classe centrale. Cela signifie que les deux obéiront aux règles du sélecteur ".center".

   <h1 class="center"> 
    This heading will be center-aligned 
    </h1> 
    <p class="center"> 
    This paragraph will also be center-aligned. 
    </p>

Remarque : les chiffres ne peuvent pas être utilisés comme premier caractère du nom de la classe ! Cela ne fonctionnera pas dans Mozilla ou Firefox.
Comme id, la classe peut également être utilisée comme sélecteur dérivé :

 .fancy td { 
        color: #f60; 
        background: #666; 
        }

Dans l'exemple ci-dessus, les cellules du tableau à l'intérieur du plus grand élément avec le nom de classe fantaisie seront affichées avec un fond gris orange texte. (Un élément plus grand nommé fantaisie pourrait être une table ou un p.)
les éléments peuvent également être sélectionnés en fonction de leur classe :

    td.fancy { 
        color: #f60; 
        background: #666; 
        }

Dans l'exemple ci-dessus, le nom de la classe est fantaisie Les cellules du tableau sera orange avec un fond gris.

   <td class="fancy">

Sélecteur multi-classes

1. En HTML, une valeur de classe peut contenir une liste de mots, séparés par des espaces. Par exemple, si vous souhaitez marquer un élément spécifique comme à la fois important et avertissement, vous pouvez écrire (l'ordre des deux mots n'a pas d'importance, vous pouvez écrire avertissement important) :

<p class="important warning">
This paragraph is a very important warning.
</p>

Nous supposons que tous les éléments de classe important sont en gras et tous les éléments de classe avertissement sont en italique. Tous les éléments dont la classe contient à la fois important et avertissement ont également un fond argenté. Il peut s'écrire ainsi :

.important {font-weight:bold;}
.warning {font-weight:italic;}
.important.warning {background:silver;}

2. En reliant deux sélecteurs de classe entre eux, seuls les éléments qui contiennent ces noms de classe peuvent être sélectionnés (l'ordre des noms de classe n'est pas limité).
Si un sélecteur multi-classe contient un nom de classe qui ne figure pas dans la liste des noms de classe, la correspondance échouera. Considérez les règles suivantes :

.important.urgent {background:silver;}

Comme prévu, ce sélecteur ne correspondra qu'à p éléments dont l'attribut class contient les mots important et urgent. Par conséquent, si un élément p n’a que les mots important et warn dans son attribut de classe, il ne correspondra pas. Il correspond cependant aux éléments suivants :

<p class="important urgent warning">
This paragraph is a very important and urgent warning.
</p>

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!