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

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

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

— 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