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
źródło
Odpowiedzi:
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 . 1
Wynika to z tego, że rozróżnianie wielkości liter w selektorach zależy od tego, co mówi język dokumentu :
Tak więc, biorąc pod uwagę elementu HTML z
Selfcatering
klasy, ale bezSelfCatering
klasy selektorów.Selfcatering
i[class~="Selfcatering"]
będzie go dopasować, a selektorów.SelfCatering
i[class~="SelfCatering"]
nie będzie. 2)Jeśli typ dokumentu zdefiniował nazwy klas jako bez rozróżniania wielkich i małych liter, to pasowałbyś do niego niezależnie.
1 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 .
2 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 zSelfcatering
klasą lubSelfCatering
klasą (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.źródło
div
iDIV
selektory 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ź?DIV
selektor nie będzie już pasował.).selfcatering
ustawiony, a selektory nie rozróżniają wielkości liter, to dlaczego miałoby to obchodzić, czy klasa jest,Selfcatering
czySelfCatering
teżsElfcAtErInG
? czego mi brakuje?Być może nie kłamstwo, ale potrzeba wyjaśnienia.
W samym css nie jest rozróżniana wielkość liter.
Na przykład
ale w nazwach muszą być rozróżniane małe i wielkie litery, aby były unikalnymi identyfikatorami.
Mam nadzieję, że to pomaga.
źródło
W trybie dziwactwa wszystkie przeglądarki zachowują się bez rozróżniania wielkości liter, gdy używają nazw klas i identyfikatorów CSS.
Czasami, gdy masz złe typy dokumentów, takie jak poniżej, twoja przeglądarka przechodzi w tryb dziwactwa.
powinieneś użyć standardowego doctype
HTML 5
HTML 4.01 Surowy
HTML 4.01 Przejściowy
Zestaw ramek HTML 4.01
XHTML 1.0 Strict
XHTML 1.0 Przejściowy
Zestaw ramek XHTML 1.0
XHTML 1.1
jeśli nazwa klasy lub identyfikatora CSS zachowuje wielkość liter bez rozróżniania wielkości, sprawdź swój typ dokumentu.
źródło
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
źródło