Селектор CSS з періодом в ідентифікаторі


96

Специфікація HTML дозволяє використовувати періоди (.) В ідентифікаторі:

<img id="some.id" />

Однак використання правила селектора ідентифікатора CSS не відповідатиме належним чином:

#some.id { color: #f00; }

Специфікація CSS для селекторів ID не згадує про цей випадок. Тож я припускаю, що він використовує комбінацію імені тегу та селектора класу ? Наприклад, правило CSS a.classNameзастосовуватиметься до всіх прив'язних тегів ( <a>) з назвою класу className, наприклад <a class="className"></a>.

Чи можна мати правило зовнішнього файлу CSS, яке посилається на елемент HTML за його ідентифікатором, який містить крапку?

Я сподіваюся, що не, оскільки специфікація CSS вказує, що " ідентифікатор " CSS не включає період як дійсний символ. То чи це принципова невідповідність специфікацій HTML та CSS? Чи є моєю єдиною альтернативою використовувати інший тип виділення CSS? Хтось розумніший за мене може це підтвердити чи спростувати?

(Я б видалив крапку з атрибута HTML id, щоб спростити речі, але це ідентифікатор, який генерується системою, тому в цьому випадку я не маю можливості його змінити.)


Можна сказати, що це принципове невідповідність HTML і CSS. Однак, оскільки це дві різні мови, не передбачається, що вони збігаються; ідентифікатор HTML - це ідентифікатор HTML, тоді як ідентифікатор CSS - ідентифікатор CSS. Крім того, CSS може стилізувати й інші мови, а не лише HTML (хоча надано, CSS був створений для HTML на початку).
BoltClock

3
Також #some.idвикористовується комбінація ідентифікатора та селектора класу.
BoltClock

Чи ідентифікатор - це єдиний атрибут, який у вас є як гачок стилю? Я знаю, що це трохи не тематично, але мені цікаво, чому ви хочете використовувати ідентифікатор замість img або класу (якщо такий є).
Jayx

@Jayx RE "Навіщо використовувати ідентифікатор замість img (тегу) або класу?" Це змінюється з багатьох причин та ситуацій. Але в цьому випадку потрібен стилізований елемент, а не всі зображення на сторінці. Клас міг бути використаний, якщо HTML можна було змінити, але в цьому випадку він не міг бути змінений, оскільки він був створений системою, що не залежить від нас.
Джон Адамс,

Відповіді:


194

Класичний. Просто перекопавши всі специфікації, пишучи запитання, я ще прочитав його і виявив, що є символ втечі. Мені це ніколи раніше не потрібно, але специфікація CSS дозволяє зворотну косу риску (\), як і більшість мов. Що ви знаєте?

Отже, у моєму прикладі відповідатиме наступне правило:

#some\.id { color: #f00; }


8
Хороша наукова робота. Таких запитань і запитань, як цей, повинно бути більше, не схоже на те, як „писати мій код замість мене“.
Павло

3
приємне дослідження. Я щойно натрапив на це у великому корпоративному додатку, над яким працюю. Я був абсолютно тупий і ніколи раніше цього не бачив. який сенс робити ідентифікатор з крапкою в ньому ??
Ентоні

1
@Anthony: Немає конкретної причини вводити крапку в атрибут ідентифікатора HTML. Думаю, іноді автори просто хочуть? Можливо, в деяких випадках це може бути викинуто з базових систем реалізації, які можуть використовувати періоди в ідентифікаторах коду на стороні сервера для обробки форми? Я впевнений, у кожного, хто має, є свої причини; але немає причин для HTML / CSS включати їх.
Джон Адамс,

1
Дякую, у мене були проблеми з OpenLayers, оскільки він використовує крапки у своїх ідентифікаторах. Наприклад: "OpenLayers.Control.Attribution_7". Думаю, це допомагає із внутрішнім кодом, де ім’я змінної javascript може мати таке саме значення, як і сам ідентифікатор.
Гофман

3
Я розглядав можливість додати нове запитання та написати власну відповідь, але вирішив просто прокоментувати тут. Якщо ви використовуєте препроцесор Stylus, вам потрібно використовувати дві зворотні скісні риски, наприклад, #some\\.idщоб уникнути спеціального символу. Першу зворотну скісну риску споживає Stylus, залишаючи решту зворотну скісну риску у складеному CSS, що забезпечує досягнення бажаного результату, описаного в цій відповіді.
markrian

22

Ви також можете використовувати img [id = some.id]]

Більше інформації тут: http://www.w3.org/TR/selectors/#attribute-selectors


1
Це може працювати в деяких браузерах, але я бачив помилки, що виникають і в селекторах атрибутів. Ти все ще можеш уникнути ., як \.ніби.
Chris Jaynes
Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.