it-swarm.com.ru

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

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

.holiday-type.Selfcatering

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

<div class="holiday-type Selfcatering">

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

.holiday-type.SelfCatering

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

Кто-то лжет.

210
Sachin Kainth

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

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

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

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

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

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


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

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

222
BoltClock

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

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

Например

wiDth:100%;

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

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

58
Jack Stone

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

В режиме причуд 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 class или id names ведет себя case insensitive, проверьте ваш тип документа.

14
Mohamad Shiralizadeh