Maison > interface Web > tutoriel CSS > le corps du texte

Une introduction au problème du nom de classe en CSS

王林
Libérer: 2020-04-15 09:14:19
avant
2518 Les gens l'ont consulté

Une introduction au problème du nom de classe en CSS

Les noms de classe CSS suivants commençant par des chiffres ne prendront pas effet :

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

Un nom de classe CSS valide doit commencer par l'un des éléments suivants :

1. Soulignement_

2. Tiret-

3. Lettres a - z

suivies d'autres _, - chiffres ou lettres.

(Tutoriel recommandé : Tutoriel d'introduction CSS)

En utilisant des expressions régulières, un nom de classe CSS légal est :

-?[_a-zA-Z]+[_a-zA-Z0-9-]*
Copier après la connexion

Selon CSS Selon la description de la norme, si le nom de la classe commence par un tiret -, le deuxième caractère doit être un trait de soulignement _ ou une lettre, mais les tests réels ont révélé qu'en plus des deux mentionnés, il est également valable d'être suivi de un autre tiret.

Voici le code et les résultats du test :

<p class="1st">should apply red color</p>
<p class="-1foo">should apply red color</p>
<p class="-_foo">should apply red color</p>
<p class="--foo">should apply red color</p>
<p class="-foo">should apply red color</p>
<p class="foo">should apply red color</p>
.1st {
  color: red;
}
.-1foo {
  color: red;
}
.-_foo {
  color: red;
}

.--foo {
  color: red;
}

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

Les résultats sont tels qu'indiqués :

Une introduction au problème du nom de classe en CSS

Tutoriel vidéo recommandé : Tutoriel vidéo 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!

Étiquettes associées:
source:jb51.net
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
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal