Имена классов в селекторах CSS чувствительны к регистру?

229

Я постоянно читаю везде, что CSS не чувствителен к регистру, но у меня есть этот селектор

.holiday-type.Selfcatering

который, когда я использую в своем HTML, как это, получает

<div class="holiday-type Selfcatering">

Если я изменю вышеупомянутый селектор, как это

.holiday-type.SelfCatering

Тогда стиль не подобран.

Кто-то лжет.

html css css-selectors

— Сачин Каинт
источник

55

Мораль этой истории всегда чувствительна к регистру - не прыгай взад-вперед волей и неволей. Вы обнаружите, что ваш код легче читать, и любой, кто соберет ваши остатки, оценит его.

— кингданго

3

Теперь я отношусь к регистру. class = "Price" не работает, class = "price" работает, поэтому в практическом повседневном смысле они чувствительны к регистру.

— Тино Макларен

4

Смотрите полную «Матрицу регистра» , о чувствительности к регистру в значениях свойств и селекторов .

— Питер Краусс

5

Забавно, я постоянно использовал camelCase в названии своего класса, но CSS не нашел его в веб-браузере iOS. Таким образом, мораль, всегда использовать черточки для классов.

— EpicPandaForce

242

CSS-селекторы обычно нечувствительны к регистру; это включает селекторы класса и ID.

Но имена классов HTML являются чувствительно к регистру (определение атрибута), и это вызывает несоответствие в вашем втором примере. Это не изменилось в HTML5 . ¹

Это потому, что чувствительность к регистру селекторов зависит от того, что говорит язык документа :

Синтаксис всех селекторов нечувствителен к регистру в диапазоне ASCII (т. Е. [Az] и [AZ] эквивалентны), за исключением частей, которые не контролируются селекторами. Чувствительность к регистру имен элементов языка документа, имен атрибутов и значений атрибутов в селекторах зависит от языка документа.

Таким образом, дается HTML - элемент с Selfcateringклассом , но без SelfCateringкласса, селекторы .Selfcateringи [class~="Selfcatering"]будет соответствовать его, в то время как селекторы .SelfCateringи [class~="SelfCatering"]не будет. ²

Если тип документа определит имена классов как нечувствительные к регистру, то вы получите совпадение независимо.

¹ _{В режиме совместимости для всех браузеров классы и идентификаторы чувствительны к регистру. Это означает, что селекторы с несовпадающим регистром всегда будут совпадать. Это поведение одинаково во всех браузерах по устаревшим причинам и упоминается в этой статье .}

² _{Что стоит, уровень селекторов 4 содержит предложенный синтаксис для принудительного поиска без учета регистра значений атрибутов с помощью [class~="Selfcatering" i]или [class~="SelfCatering" i]. Оба селектора будут сопоставлять элемент HTML или XHTML либо с Selfcateringклассом, либо с SelfCateringклассом (или, конечно, с обоими). Однако такого синтаксиса для селекторов класса или идентификатора не существует (пока?), Возможно, потому, что они несут семантику, отличную от обычных селекторов атрибутов (с которой не связана семантика), или потому что сложно придумать подходящий синтаксис.}

— BoltClock
источник

7

Вау, это совершенно противоположно тому, что показывает мой тест jsfiddle . Там divи DIVселекторы и совпадали <div>, но селекторы идентификатора и имени класса должны были быть точно чувствительны к регистру. Если я не понял ваш ответ?

— Родди из замороженного гороха

21

@Roddy of Frozen Peas: это потому, что HTML-классы и идентификаторы чувствительны к регистру, а имена тегов - нет. По этой причине я специально исключил имена тегов из своего ответа. (Между прочим, имена тегов чувствительны только к регистру в истинном XHTML, независимо от типа документа - если jsFiddle может позволить заставить страницу обслуживать как application / xhtml + xml, DIVселектор больше не будет совпадать.)

— BoltClock

2

@BoltClock Что означает здесь «язык документа»?

— Компьютерщик

4

@Geek: «язык документа» относится к языку, к которому вы применяете CSS, чаще всего к HTML, XHTML или XML. Вы можете найти определение здесь .

— BoltClock

2

Кто-нибудь еще полностью запутался? Если селекторы случай в чувствительны, то , по определению, не что замыкающие классов CSS ( по отношению к селекторам выбирающих их ) случае в чувствительном, тоже? Другими словами, по отношению друг к другу (CSS-классы и селекторы) - если один не учитывает регистр, то это означает, что они оба. В других словах - если мой селектор .selfcateringи селекторы чувствительны к регистру, поэтому он должен заботиться , является ли класс Selfcateringили SelfCateringили sElfcAtErInG? Чего мне не хватает?

— Jbyrd

62

Возможно, не ложь, но необходимость в разъяснениях.

Сам фактический css не чувствителен к регистру.

Например

wiDth:100%;

но имена, они должны быть чувствительны к регистру, чтобы быть уникальными идентификаторами.

Надеюсь, это поможет.

— Джек Стоун
источник

20

В режиме совместимости все браузеры ведут себя без учета регистра при использовании имен классов и идентификаторов CSS.

В режиме причуд CSS имена классов и идентификаторов не чувствительны к регистру. В стандартном режиме они чувствительны к регистру. (Это также относится к getElementsByClassName.) Подробнее.

Иногда, когда у вас неправильные типы документов, такие как ниже, ваш браузер переходит в режим причуд.

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

вы должны использовать стандартный doctype

HTML 5

<!DOCTYPE html>

HTML 4.01 Строгий

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

HTML 4.01 Переходный

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

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

если ваш класс CSS или имена идентификаторов ведут себя без учета регистра, проверьте ваш тип документа.

— Мохамад Ширализаде
источник

3

CSS не чувствителен к регистру.

Но в HTML5 класс и ID чувствительны к регистру

Таким образом, свойства CSS, значения, имена псевдоклассов, имена псевдоэлементов, имена элементов не чувствительны к регистру

И класс CSS, id, URL, семейства шрифтов чувствительны к регистру.

примечание: в режиме html quirks css нечувствителен к регистру даже для идентификатора и класса (если вы удалите объявление doctype)

Пример для 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>

— Замена
источник