Quelle est la représentation du sélecteur de classe en CSS ?

En CSS, le sélecteur de classe est affiché sous forme d'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 respecteront les 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 : Le premier caractère du nom de la classe ne peut pas utiliser de chiffres ! 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 de l'élément plus grand avec le nom de classe fantaisie auront un fond gris Texte orange s’affiche. (Un élément plus grand nommé fantaisie pourrait être une table ou un div)

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 classe des cellules de table fantaisie sera orange avec un fond gris.

<td class="fancy">

Vous pouvez attribuer une classe fantaisie à n'importe quel élément de table autant de fois que vous le souhaitez. Les cellules marquées de fantaisie seront orange avec un fond gris. Les cellules auxquelles aucune classe nommée fantaisie n’est affectée ne sont pas affectées par cette règle. Il convient également de noter que les paragraphes avec une classe fantaisie ne seront pas orange avec un fond gris, et bien sûr, tous les autres éléments marqués comme fantaisie ne seront pas affectés par cette règle. Tout cela est dû à la façon dont nous avons écrit cette règle, l'effet est limité aux cellules de tableau marquées comme fantaisie (c'est-à-dire en utilisant l'élément td pour sélectionner la classe fantaisie).

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!