Bei Klassennamen in CSS-Selektoren wird zwischen Groß- und Kleinschreibung unterschieden?

Ich lese überall, dass CSS nicht zwischen Groß- und Kleinschreibung unterscheidet, aber ich habe diesen Selektor

.holiday-type.Selfcatering

was, wenn ich es in meinem HTML verwende, so aufgegriffen wird

<div class="holiday-type Selfcatering">

Wenn ich den obigen Selektor so ändere

.holiday-type.SelfCatering

Dann wird der Stil nicht aufgegriffen.

Jemand erzählt Lügen.

CSS-Selektoren unterscheiden im Allgemeinen nicht zwischen Groß- und Kleinschreibung. Dies schließt Klassen- und ID-Selektoren ein.

Bei HTML-Klassennamen wird jedoch zwischen Groß- und Kleinschreibung unterschieden (siehe Attributdefinition). Dies führt in Ihrem zweiten Beispiel zu einer Nichtübereinstimmung. Dies hat sich in HTML5 nicht geändert . ¹

Dies liegt daran, dass die Groß- und Kleinschreibung von Selektoren davon abhängt, was die Dokumentensprache sagt :

Bei allen Selectors-Syntaxen wird innerhalb des ASCII-Bereichs die Groß- und Kleinschreibung nicht berücksichtigt (dh [az] und [AZ] sind äquivalent), mit Ausnahme von Teilen, die nicht unter der Kontrolle von Selectors stehen. Die Groß- und Kleinschreibung von Elementnamen, Attributnamen und Attributwerten in Dokumentensprachen in Selektoren hängt von der Dokumentsprache ab.

Wenn also ein HTML-Element mit einer SelfcateringKlasse, aber ohne SelfCateringKlasse gegeben ist, stimmen die Selektoren .Selfcateringund [class~="Selfcatering"]diese überein, während die Selektoren .SelfCatering und [class~="SelfCatering"]nicht. ²

Wenn der Dokumenttyp Klassennamen als unabhängig von Groß- und Kleinschreibung definiert, haben Sie unabhängig davon eine Übereinstimmung.

¹ _{Im Mackenmodus für alle Browser wird bei Klassen und IDs die Groß- und Kleinschreibung nicht berücksichtigt. Dies bedeutet, dass die nicht übereinstimmenden Selektoren immer übereinstimmen. Dieses Verhalten ist aus älteren Gründen in allen Browsern konsistent und wird in diesem Artikel erwähnt .}

² _{Für das, was es wert ist , Selektoren Ebene 4 enthält eine vorgeschlagene Syntax zum Erzwingen eines Groß- und Kleinschreibung Suche auf Werte Attribut [class~="Selfcatering" i]oder [class~="SelfCatering" i]. Beide Selektoren stimmen ein HTML- oder XHTML-Element entweder mit einer SelfcateringKlasse oder einer SelfCateringKlasse (oder natürlich mit beiden) überein . Es gibt jedoch (noch?) Keine solche Syntax für Klassen- oder ID-Selektoren, vermutlich weil sie eine andere Semantik aufweisen als reguläre Attributselektoren (denen keine Semantik zugeordnet ist) oder weil es schwierig ist, eine verwendbare Syntax zu finden.}

Vielleicht keine Lüge, aber Klärungsbedarf.

Das eigentliche CSS selbst unterscheidet nicht zwischen Groß- und Kleinschreibung.

Beispielsweise

wiDth:100%;

Bei den Namen muss jedoch zwischen Groß- und Kleinschreibung unterschieden werden, um eindeutige Kennungen zu erhalten.

Hoffentlich hilft das.

Im Quirks-Modus verhalten sich alle Browser bei Verwendung von CSS-Klassen- und ID-Namen so, dass die Groß- und Kleinschreibung nicht berücksichtigt wird.

Im Quirks-Modus wird bei CSS-Klassen- und ID-Namen die Groß- und Kleinschreibung nicht berücksichtigt. Im Standardmodus wird zwischen Groß- und Kleinschreibung unterschieden. (Dies gilt auch für getElementsByClassName.) Lesen Sie mehr.

Manchmal, wenn Sie falsche Doctypes wie unten haben, wechselt Ihr Browser in den Mackenmodus.

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

Sie sollten den Standard-Doctype verwenden

HTML 5

<!DOCTYPE html> 

HTML 4.01 Streng

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

HTML 4.01 Übergang

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

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

XHTML 1.0-Frameset

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

Wenn sich Ihre CSS-Klassen- oder ID-Namen nicht zwischen Groß- und Kleinschreibung unterscheiden, überprüfen Sie bitte Ihren Doctype.

CSS unterscheidet nicht zwischen Groß- und Kleinschreibung.

In HTML5 wird bei Groß- und Kleinschreibung zwischen Groß- und Kleinschreibung unterschieden

Bei CSS-Eigenschaften, Werten, Pseudoklassennamen, Pseudoelementnamen und Elementnamen wird die Groß- und Kleinschreibung nicht berücksichtigt

Bei CSS-Klassen, IDs, URLs und Schriftfamilien wird zwischen Groß- und Kleinschreibung unterschieden.

Hinweis: Im HTML-Quirks-Modus wird bei CSS auch für ID und Klasse die Groß- und Kleinschreibung nicht berücksichtigt (wenn Sie die Doctype-Deklaration entfernen).

Beispiel für 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>