I nomi delle classi nei selettori CSS fanno distinzione tra maiuscole e minuscole?

229

Continuo a leggere ovunque che i CSS non fanno distinzione tra maiuscole e minuscole, ma ho questo selettore

.holiday-type.Selfcatering

che quando uso nel mio HTML, come questo, viene raccolto

<div class="holiday-type Selfcatering">

Se cambio il selettore sopra in questo modo

.holiday-type.SelfCatering

Quindi lo stile non viene rilevato.

Qualcuno sta dicendo bugie.

html css css-selectors

— Sachin Kainth
fonte

55

La morale di questa storia è sempre attenta alle maiuscole / minuscole, non rimbalzare avanti e indietro, volenti o nolenti. Scoprirai che il tuo codice è più facile da leggere e chiunque raccoglierà gli avanzi lo apprezzerà.

— Kingdango,

3

Sto trattando come maiuscole / minuscole da ora in poi. class = "Price" non funzionante, class = "price" funzionante, quindi in senso pratico tutti i giorni SONO sensibili al maiuscolo / minuscolo.

— Tino Mclaren,

4

Vedi una "Matrice case" completa , sulla sensibilità del case nei valori di proprietà e selettori .

— Peter Krauss,

5

Cosa divertente, usavo costantemente camelCase nel nome della mia classe, ma i CSS non l'hanno rilevato su Webview iOS. Quindi la morale è, usare sempre-trattini-per-classi.

— EpicPandaForce,

242

I selettori CSS sono generalmente senza distinzione tra maiuscole e minuscole; questo include i selettori di classe e ID.

Ma i nomi delle classi HTML fanno distinzione tra maiuscole e minuscole (vedere la definizione dell'attributo) e ciò causa una mancata corrispondenza nel secondo esempio. Questo non è cambiato in HTML5 . ¹

Questo perché la distinzione tra maiuscole e minuscole dei selettori dipende da ciò che dice il linguaggio del documento :

Tutta la sintassi dei selettori non fa distinzione tra maiuscole e minuscole nell'intervallo ASCII (ovvero [az] e [AZ] sono equivalenti), ad eccezione delle parti che non sono sotto il controllo dei selettori. La distinzione tra maiuscole e minuscole dei nomi degli elementi del linguaggio dei documenti, dei nomi degli attributi e dei valori degli attributi nei selettori dipende dalla lingua del documento.

Quindi, dato un elemento HTML con una Selfcateringclasse ma senza una SelfCateringclasse, i selettori .Selfcateringe [class~="Selfcatering"]lo corrisponderanno, mentre i selettori .SelfCateringe [class~="SelfCatering"]no. ²

Se il tipo di documento definiva i nomi di classe come maiuscole e minuscole, allora avresti una corrispondenza a prescindere.

¹ _{In modalità Quirks per tutti i browser, le classi e gli ID non fanno distinzione tra maiuscole e minuscole. Ciò significa che i selettori che non corrispondono al caso corrisponderanno sempre. Questo comportamento è coerente in tutti i browser per motivi legacy ed è menzionato in questo articolo .}

² _{Per quello che vale, Selettori livello 4 contiene una sintassi proposta per forzare una ricerca senza distinzione tra maiuscole e minuscole sui valori degli attributi usando [class~="Selfcatering" i]o [class~="SelfCatering" i]. Entrambi i selettori corrisponderanno a un elemento HTML o XHTML con una Selfcateringclasse o una SelfCateringclasse (o, ovviamente, entrambi). Tuttavia, non esiste tale sintassi per i selettori di classe o ID (ancora?), Presumibilmente perché portano una semantica diversa dai selettori di attributi regolari (che non hanno una semantica associata) o perché è difficile trovare una sintassi utilizzabile.}

— BoltClock
fonte

7

Whoa questo è esattamente l'opposto di ciò che indica il mio test jsfiddle . Lì i selettori dive DIVcorrispondevano entrambi a <div>, ma i selettori ID e nome della classe dovevano fare esattamente la distinzione tra maiuscole e minuscole. A meno che non abbia frainteso la tua risposta?

— Roddy of the Frozen Peas,

21

@Roddy of the Frozen Peas: Questo perché le classi e gli ID HTML fanno distinzione tra maiuscole e minuscole, mentre i nomi dei tag non lo sono. Per questo motivo, ho lasciato specificamente i nomi dei tag fuori dalla mia risposta. (A proposito, i nomi dei tag fanno distinzione tra maiuscole e minuscole solo nel vero XHTML, indipendentemente dal doctype - se jsFiddle potrebbe permetterti di forzare la pagina come application / xhtml + xml, il DIVselettore non corrisponderebbe più.)

— BoltClock

2

@BoltClock Cosa significa "lingua del documento" qui?

— Geek,

4

@Geek: "lingua del documento" si riferisce alla lingua di tutto ciò a cui stai applicando CSS, più comunemente HTML, XHTML o XML. Puoi trovare la definizione qui .

— BoltClock

2

Qualcun altro è completamente confuso? Se i selettori sono case in sensitive, quindi, per definizione, non lo fa che le classi CSS make ( in relazione ai selettori selezionandoli ) caso in sensibile, troppo? In altre parole, in relazione tra loro (classi CSS e selettori) - se uno non fa distinzione tra maiuscole e minuscole, significa che lo sono entrambi. In altre parole: se il mio selettore è .selfcateringe i selettori non fanno distinzione tra maiuscole e minuscole, perché dovrebbe interessarsi se la classe è Selfcateringo SelfCateringo sElfcAtErInG? Cosa mi sto perdendo?

— jbyrd,

62

Forse non è una bugia, ma è necessario un chiarimento.

L'attuale css stesso non fa distinzione tra maiuscole e minuscole.

Per esempio

wiDth:100%;

ma i nomi, devono essere case sensitive per essere identificatori univoci.

Spero che aiuti.

— Jack Stone
fonte

20

In modalità Quirks tutti i browser si comportano come maiuscole e minuscole quando si usano i nomi ID e classe CSS.

In modalità strane, i nomi di classe e ID CSS non fanno distinzione tra maiuscole e minuscole. In modalità standard sono sensibili al maiuscolo / minuscolo. (Questo vale anche per getElementsByClassName.) Altre informazioni.

A volte, quando hai documenti errati come muggito, il tuo browser passa in modalità stranezze.

<!DOCTYPE html PUBLIC>
<!DOCTYPE html anytext>

dovresti usare doctype standard

HTML 5

<!DOCTYPE html>

HTML 4.01 Rigoroso

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

HTML 4.01 Transizionale

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

Set di frame HTML 4.01

<!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">

Set di frame 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">

se la tua classe CSS o i nomi ID non fanno distinzione tra maiuscole e minuscole, controlla il tuo doctype.

— Mohamad Shiralizadeh
fonte

3

CSS non fa distinzione tra maiuscole e minuscole.

Ma in HTML5 la classe e l'ID fanno distinzione tra maiuscole e minuscole

Pertanto, proprietà CSS, valori, nomi di pseudo-classi, nomi di pseudo-elementi, nomi di elementi non fanno distinzione tra maiuscole e minuscole

E classe CSS, id, URL, famiglie di caratteri fanno distinzione tra maiuscole e minuscole.

nota: in modalità html quirks il CSS non fa distinzione tra maiuscole e minuscole anche per ID e classe (se si rimuove la dichiarazione doctype)

Esempio su CodePen: https://codepen.io/swapnilPakolu/pen/MWgvQyB?&editable=true#anon-signup

<!DOCTYPE html>
<html>
<head>
<title>CSS case sensitive ?</title>
<style>

P#id
{color:RED;}

p#ID
{font-size:30PX;}

#iD
{BORDER:4px solid blue;}

.class
{text-decoration:underLine;}

.CLASS
{background-color:graY;}

.Class
{font-weight:900;}

#ID::afTeR
{conTent:"colored text";
disPlay:bLock;
color:#fAdAcA;}

.class:hoVeR
{background-color:lightblue;}

</style>
</head>
<body>
<p id="id" class="class">red and underline</p>
<p id="ID" class="CLASS">30px font size and gray background</p>
<p id="iD" class="Class">bold and blue border</p>
</body>
</html>

— Scambiare
fonte