Чи чутливі до регістру імена класів у селекторах CSS?

229

Я постійно читаю скрізь, що CSS не враховує регістри, але у мене є цей вибір

.holiday-type.Selfcatering

який, коли я використовую у своєму HTML, як це, отримує

<div class="holiday-type Selfcatering">

Якщо я зміню вищевказаний селектор, як це

.holiday-type.SelfCatering

Тоді стиль не підбирається.

Хтось говорить брехню.

html css css-selectors

— Сачин Карінт
джерело

55

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

— kingdango

3

Я віднині ставлюсь до регістру. клас = "Ціна" не працює, клас = "ціна" працює, тому в практичному розумінні кожного дня вони є чутливими до регістру.

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

4

Дивіться повну "Матрицю справи" , про чутливість регістру у значеннях властивостей та селекторах .

— Пітер Краус

5

Смішна річ, я постійно використовував camelCase у своєму імені класу, але CSS не підходив до нього на веб-перегляді iOS. Тож мораль - це завжди використання тире-класів для занять.

— EpicPandaForce

242

CSS-селектори, як правило, не чутливі до регістру; сюди входять селектори класів та ідентифікаторів.

Але назви класів 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

Whoa це точно протилежне тому, що вказує мій тест jsfiddle . Там divі DIVселектори збігалися <div>, але ідентифікатори, і селектори імен класу повинні бути чітко залежними від регістру. Якщо я неправильно зрозумів вашу відповідь?

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

21

@Roddy of the Frozen Peas: це тому, що HTML-класи та ідентифікатори чутливі до регістру, тоді як назви тегів - ні. Я спеціально залишив імена тегів у відповіді з цієї причини. (До речі, імена тегів тільки чутливі до регістру в істинному XHTML, незалежно від DOCTYPE - якщо jsFiddle може дозволити вам змусити сторінку подавати як додаток / XHTML + XML, то DIVбільше не матимуть селектор відповідності.)

— BoltClock

2

@BoltClock Що тут означає "мова документа"?

— Geek

4

@Geek: "мова документа" означає мову, до якої ви застосовуєте CSS, найчастіше HTML, XHTML або XML. Визначення можна знайти тут .

— BoltClock

2

Хтось ще ретельно заплутався? Якщо селектори випадок в чутливі, то , за визначенням, не що замикають класів CSS ( по відношенню до селекторам вибирають їх ) випадку в чутливому, теж? Іншими словами, по відношенню один до одного (класи CSS та селектори) - якщо один з них нечутливий до випадків, то це означає, що вони обидва. В інших словах - якщо мій селектор .selfcateringі селектори чутливі до регістру, тому він повинен піклуватися , чи є клас Selfcateringабо SelfCateringабо sElfcAtErInG? Що я пропускаю?

— jbyrd

62

Можливо, не брехня, але потрібна роз’яснення.

Сам css не враховує регістр.

Наприклад

wiDth:100%;

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

Сподіваюся, що це допомагає.

— Джек Стоун
джерело

20

У режимі диваків всі веб-переглядачі ведуть себе як нечутливі до регістру, коли використовують імена класів та id CSS.

У режимі диваків імена класів CS та id не залежать від регістру. У стандартному режимі вони залежать від регістру. (Це стосується також getElementsByClassName.) Детальніше.

Іноді, коли у вас неправильні доктрипи, як-от нижче, ваш веб-переглядач переходить у режим примх.

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

ви повинні використовувати стандартний доктіп

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 Строгий

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

XHTML 1.0 Перехідний

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

якщо ваші імена класів CS або id поводяться з урахуванням регістру, перевірте свій тип.

— Мухаммад Ширалізаде
джерело

3

CSS нечутливий до регістру.

Але в HTML5 клас та ідентифікатор залежать від регістру

Отже, властивості CSS, значення, імена псевдокласів, імена псевдоелементів, назви елементів не залежать від регістру

І CSS-клас, id, URL, сім'ї шрифтів залежать від регістру.

Примітка: у режимі html quirks css нечутливий до регістру навіть для ID та класу (якщо ви видалите декларацію 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>

— Зміна
джерело