Czy w nazwach klas w selektorach CSS rozróżniana jest wielkość liter?

229

Cały czas czytam, że CSS nie rozróżnia wielkości liter, ale mam ten selektor

.holiday-type.Selfcatering

które kiedy używam w moim HTML, tak jak ten, zostaje odebrane

<div class="holiday-type Selfcatering">

Jeśli zmienię powyższy selektor w ten sposób

.holiday-type.SelfCatering

Wtedy styl nie zostanie wybrany.

Ktoś kłamie.

html css css-selectors

— Sachin Kainth
źródło

55

Morał tej historii jest zawsze rozróżniany z uwzględnieniem wielkości liter - nie odbijaj się tam iz powrotem, chcąc nie chcąc. Przekonasz się, że Twój kod jest łatwiejszy do odczytania, a każdy, kto zbierze resztki, doceni go.

— kingdango,

3

Odtąd traktuję jak wielkość liter. class = „cena” nie działa, class = „cena” działa, więc w praktycznym sensie każdego dnia rozróżniają wielkość liter.

— Tino Mclaren,

4

Zobacz pełną matrycę „przypadek” , o wielkości liter w wartościach właściwości i selektorów .

— Peter Krauss,

5

Zabawne, że konsekwentnie używałem camelCase w nazwie mojej klasy, ale CSS nie zauważył tego w widoku internetowym iOS. Morał brzmi: zawsze używaj kresek dla klas.

— EpicPandaForce

242

Selektory CSS zasadniczo nie rozróżniają wielkości liter; obejmuje to selektory klas i identyfikatorów.

Jednak w nazwach klas HTML rozróżniana jest wielkość liter (patrz definicja atrybutu), co powoduje niedopasowanie w drugim przykładzie. Nie zmieniło się to w HTML5 . ¹

Wynika to z tego, że rozróżnianie wielkości liter w selektorach zależy od tego, co mówi język dokumentu :

W składni wszystkich selektorów rozróżniana jest wielkość liter w zakresie ASCII (tj. [Az] i [AZ] są równoważne), z wyjątkiem części, które nie są pod kontrolą selektorów. Rozróżnianie wielkości liter w nazwach elementów języka dokumentu, nazwach atrybutów i wartości atrybutów w selektorach zależy od języka dokumentu.

Tak więc, biorąc pod uwagę elementu HTML z Selfcateringklasy, ale bez SelfCateringklasy selektorów .Selfcateringi [class~="Selfcatering"]będzie go dopasować, a selektorów .SelfCateringi [class~="SelfCatering"]nie będzie. ²⁾

Jeśli typ dokumentu zdefiniował nazwy klas jako bez rozróżniania wielkich i małych liter, to pasowałbyś do niego niezależnie.

¹ _{W trybie dziwactwa dla wszystkich przeglądarek, klasy i identyfikatory nie uwzględniają wielkości liter. Oznacza to, że selektory niedopasowane wielkości liter zawsze będą pasować. To zachowanie jest spójne we wszystkich przeglądarkach ze względów starszych i zostało wspomniane w tym artykule .}

² _{Jeśli chodzi o to, co jest warte, poziom selektorów 4 zawiera proponowaną składnię do wymuszania rozróżniania wielkości liter w atrybutach za pomocą [class~="Selfcatering" i]lub [class~="SelfCatering" i]. Oba selektory będą pasowały do elementu HTML lub XHTML z Selfcateringklasą lub SelfCateringklasą (lub, oczywiście, obiema). Jednak nie ma takiej składni dla klasy lub identyfikatora selektorów (jeszcze?), Przypuszczalnie dlatego, że noszą różne semantykę od zwykłych selektorów atrybutów (które nie semantykę z nimi związane), albo dlatego, że trudno jest wymyślić składni użytkowej.}

— BoltClock
źródło

7

Whoa, to jest dokładnie odwrotność tego, co wskazuje mój test jsfiddle . Tam zarówno selektory, jak divi DIVselektory pasowały do <div>, ale selektory id i nazwy klasy musiały dokładnie rozróżniać małe i wielkie litery. Chyba że źle zrozumiałem twoją odpowiedź?

— Roddy z mrożonego groszku,

21

@Roddy of the Frozen Peas: To dlatego, że w klasach HTML i identyfikatorach rozróżniana jest wielkość liter, podczas gdy w nazwach tagów nie. Z tego powodu specjalnie zostawiłem nazwy tagów w mojej odpowiedzi. (Nawiasem mówiąc, w nazwach znaczników rozróżniana jest wielkość liter tylko w prawdziwym XHTML, niezależnie od typu dokumentu - jeśli jsFiddle może pozwolić na wymuszenie wyświetlania strony jako application / xhtml + xml, DIVselektor nie będzie już pasował.)

— BoltClock

2

@BoltClock Co oznacza tutaj „język dokumentu”?

— Geek

4

@Geek: „język dokumentu” odnosi się do języka, w którym stosuje się CSS, najczęściej HTML, XHTML lub XML. Możesz znaleźć definicję tutaj .

— BoltClock

2

Czy ktoś jeszcze jest całkowicie zdezorientowany? Jeśli przełączniki są rozróżniane w czuły, następnie z definicji nie robi klas CSS Marka ( w stosunku do selektorów zaznaczając je ) wypadku w czuły, zbyt? Innymi słowy, w stosunku do siebie (klasy CSS i selektory) - jeśli ktoś nie rozróżnia wielkości liter, oznacza to, że oba są. Innymi słowy - jeśli mój selektor jest .selfcateringustawiony, a selektory nie rozróżniają wielkości liter, to dlaczego miałoby to obchodzić, czy klasa jest, Selfcateringczy SelfCateringteż sElfcAtErInG? czego mi brakuje?

— jbyrd

62

Być może nie kłamstwo, ale potrzeba wyjaśnienia.

W samym css nie jest rozróżniana wielkość liter.

Na przykład

wiDth:100%;

ale w nazwach muszą być rozróżniane małe i wielkie litery, aby były unikalnymi identyfikatorami.

Mam nadzieję, że to pomaga.

— Jack Stone
źródło

20

W trybie dziwactwa wszystkie przeglądarki zachowują się bez rozróżniania wielkości liter, gdy używają nazw klas i identyfikatorów CSS.

W trybie dziwactwa nazwy klas i identyfikatorów CSS nie uwzględniają wielkości liter. W trybie standardowym rozróżniają wielkość liter. (Dotyczy to również getElementsByClassName.) Czytaj więcej.

Czasami, gdy masz złe typy dokumentów, takie jak poniżej, twoja przeglądarka przechodzi w tryb dziwactwa.

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

powinieneś użyć standardowego doctype

HTML 5

<!DOCTYPE html>

HTML 4.01 Surowy

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

HTML 4.01 Przejściowy

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

Zestaw ramek 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 Przejściowy

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Zestaw ramek 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">

jeśli nazwa klasy lub identyfikatora CSS zachowuje wielkość liter bez rozróżniania wielkości, sprawdź swój typ dokumentu.

— Mohamad Shiralizadeh
źródło

3

CSS nie rozróżnia wielkości liter.

Ale w HTML5 klasa i identyfikator uwzględniają wielkość liter

Tak więc we właściwościach CSS, wartościach, nazwach pseudoklas, nazwach pseudoelementów, nazwach elementów nie rozróżnia się wielkości liter

A klasa CSS, identyfikator, adresy URL i rodziny czcionek uwzględniają wielkość liter.

Uwaga: w trybie dziwactwa HTML css nie rozróżnia wielkości liter nawet dla ID i klasy (jeśli usuniesz deklarację typu doctype)

Przykład na 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>

— Zamiana
źródło