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

229

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.

html css css-selectors Sachin Kainth
quelle
55
Die Moral dieser Geschichte ist es, die ganze Zeit über zwischen Groß- und Kleinschreibung zu unterscheiden - hüpfen Sie nicht ohne weiteres hin und her. Sie werden feststellen, dass Ihr Code leichter zu lesen ist und jeder, der Ihre Reste einsammelt, wird es zu schätzen wissen.
Kingdango
3
Ich behandle von nun an als Groß- und Kleinschreibung. class = "Preis" funktioniert nicht, class = "Preis" funktioniert, also sind sie im praktischen alltäglichen Sinne zwischen Groß- und Kleinschreibung zu unterscheiden.
Tino Mclaren
4
Siehe eine komplette „Case Matrix“ , Groß- und Kleinschreibung in den Werten von Eigenschaften und Selektoren .
Peter Krauss
5
Lustige Sache, ich habe konsequent camelCase in meinem Klassennamen verwendet, aber CSS hat es in der iOS-Webansicht nicht aufgegriffen. Die Moral ist also, immer Striche für Klassen zu verwenden.
EpicPandaForce

Antworten:

242

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 . 1

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. 2

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

1 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 .

2 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.

BoltClock
quelle
7
Whoa das ist genau das Gegenteil von dem, was mein jsfiddle-Test anzeigt. Dort stimmten die Selektoren divund DIVbeide überein <div>, aber die ID- und Klassennamenselektoren mussten genau zwischen Groß- und Kleinschreibung unterscheiden. Es sei denn, ich habe Ihre Antwort falsch verstanden?
Roddy der gefrorenen Erbsen
21
@Roddy of the Frozen Peas: Das liegt daran, dass bei HTML-Klassen und IDs zwischen Groß- und Kleinschreibung unterschieden wird, bei Tag-Namen dagegen nicht. Aus diesem Grund habe ich Tag-Namen ausdrücklich aus meiner Antwort herausgelassen. (Tag-Namen unterscheiden in echtem XHTML übrigens nur zwischen Groß- und Kleinschreibung, unabhängig vom Doctype. Wenn Sie mit jsFiddle die Bereitstellung der Seite als application / xhtml + xml erzwingen könnten, DIVwürde der Selektor nicht mehr übereinstimmen.)
BoltClock
2
@BoltClock Was bedeutet "Dokumentensprache" hier?
Geek
4
@Geek: "Dokumentensprache" bezieht sich auf die Sprache dessen, auf was Sie CSS anwenden, am häufigsten HTML, XHTML oder XML. Die Definition finden Sie hier .
BoltClock
2
Ist noch jemand gründlich verwirrt? Wenn die Wähler Fall sind in sensiblen, dann per Definition nicht , dass CSS - Klassen machen ( in Bezug auf die Wähler sie die Auswahl ) Fall in sensiblen, auch? Mit anderen Worten, in Bezug zueinander (CSS-Klassen und Selektoren) - wenn bei einem die Groß- und Kleinschreibung nicht berücksichtigt wird, bedeutet dies, dass beide davon betroffen sind. Mit anderen Worten: Wenn bei meinem Selektor .selfcateringdie Groß- und Kleinschreibung nicht berücksichtigt wird, warum sollte es dann wichtig sein, ob die Klasse Selfcateringoder SelfCateringoder ist sElfcAtErInG? Was vermisse ich?
29.
62

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.

Jack Stone
quelle
20

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.

Mohamad Shiralizadeh
quelle
3

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>
Tauschen
quelle