Les noms de classe dans les sélecteurs CSS sont-ils sensibles à la casse?
Je continue à lire partout que CSS n'est pas sensible à la casse, mais j'ai ce sélecteur
.holiday-type.Selfcatering
qui quand je l'utilise dans mon HTML, comme ça, est ramassé
<div class="holiday-type Selfcatering">
Si je change le sélecteur ci-dessus comme ça
.holiday-type.SelfCatering
Ensuite, le style ne soit pas pris en compte.
Quelqu'un dit des mensonges.
Les sélecteurs CSS sont généralement insensibles à la casse. cela inclut les sélecteurs de classe et d'ID.
Mais les noms de classe HTML sont sensibles à la casse (voir la définition de l'attribut), ce qui entraîne une disparité dans votre deuxième exemple. Cela n'a pas changé dans HTML5 .1
En effet, la sensibilité à la casse des sélecteurs dépend de ce que dit la langue du document :
La syntaxe de tous les sélecteurs ne respecte pas la casse dans la plage ASCII (c'est-à-dire que [a-z] et [A-Z] sont équivalents), à l'exception des parties qui ne sont pas sous le contrôle de Selectors. La sensibilité à la casse des noms d'élément de langue de document, des noms d'attribut et des valeurs d'attribut dans les sélecteurs dépend de la langue du document.
Donc, étant donné un élément HTML avec une classe Selfcatering mais sans une classe SelfCatering, les sélecteurs .Selfcatering et [class~="Selfcatering"] lui correspondront, tandis que les sélecteurs .SelfCatering et [class~="SelfCatering"] ne le ferait pas.2
Si le type de document définissait les noms de classe sans tenir compte de la casse, vous auriez une correspondance, de toute façon.
1En mode quirks pour tous les navigateurs, les classes et les ID ne sont pas sensibles à la casse. Cela signifie que les sélecteurs ne respectant pas la casse seront toujours identiques. Ce comportement est cohérent sur tous les navigateurs pour des raisons héritées et est mentionné dans cet article .
2Pour ce que ça vaut, Selectors level 4 contient une syntaxe proposée pour forcer une recherche ne tenant pas compte de la casse des valeurs d'attribut à l'aide de [class~="Selfcatering" i] ou [class~="SelfCatering" i]. Les deux sélecteurs font correspondre un élément HTML ou XHTML avec une classe Selfcatering ou une classe SelfCatering (ou bien les deux). Cependant, cette syntaxe n'existe pas pour les sélecteurs de classe ou d'ID (encore?), Probablement parce qu'ils portent une sémantique différente des sélecteurs d'attributs ordinaires (auxquels aucune sémantique ne leur est associée), ou parce que il est difficile de trouver une syntaxe utilisable.
Peut-être pas un mensonge, mais besoin d'une clarification.
Le css lui-même n'est pas sensible à la casse.
Par exemple
wiDth:100%;
mais les noms, ils doivent être sensibles à la casse pour être des identificateurs uniques.
J'espère que ça t'as aidé.
En mode quirks, tous les navigateurs se comportent comme sans distinction de casse lorsqu’on utilise CSS class et id names.
En mode quirks, les noms de classe et id de CSS ne sont pas sensibles à la casse. En mode standard, ils sont sensibles à la casse. (Ceci s'applique également à getElementsByClassName.) en savoir plus ...
Parfois, lorsque vous avez des doctypes erronés comme ci-dessous, votre navigateur se met en mode quirks.
<!DOCTYPE html PUBLIC>
<!DOCTYPE html anytext>
vous devriez utiliser un doctype standard
HTML 5
<!DOCTYPE html>
HTML 4.01 Strict
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
HTML 4.01 Transitional
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
HTML 4.01 Frameset
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
XHTML 1.0 Strict
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
XHTML 1.0 Transitional
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Jeu de cadres XHTML 1.0
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
XHTML 1.1
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
si votre CSS class ou id names se comporte case insensitive, veuillez vérifier votre doctype.