Существуют ли известные проблемы с размещением недопустимых символов CSS (`@`, `:`, `!`) В атрибуте класса элемента HTML? - PullRequest
Новая
       22

Существуют ли известные проблемы с размещением недопустимых символов CSS (`@`, `:`, `!`) В атрибуте класса элемента HTML?

3 голосов
/ 12 августа 2010

Известны ли проблемы с размещением недопустимых символов класса CSS (@, :, !) в атрибуте класса элемента HTML?Как это: 

<input type='text' class='compare id:txtSecondary'/>
<input type='text' class='compare @txtSecondary'/>

Ответы [ 2 ]

6 голосов
/ 12 августа 2010

CSS забавный факт! В разделе 4.1.3 рекомендации Синтаксис и основные типы данных (из CSS2) говорится ...

Идентификаторы также могут содержать экранированные символы и любые символы ISO 10646 в виде числового кода (см. Следующий пункт). Например, идентификатор "B & W?" может быть написано как "B \ & W \?" или "B \ 26 W \ 3F".

Таким образом, вы можете включить специальные символы в свой CSS: 

<style type="text/css">
    .\@user { /* valid! */
        color:red;
    }
</style>

Кроме того, атрибут class представляет собой список cdata , который в основном означает « любой текст, кроме новых строк и нескольких пробелов ».

Так что вы можете включить что-то вроде этого в вашу разметку: 

<div class="@user">
    This is an @user
</div>

Ваша проблема не столько в @ или : символах, сколько в тех пробелах , которые вы добавили. (Поскольку в class пробелах атрибутов что-то особенное: Несколько имен классов должны быть разделены пробелами.")

2 голосов
/ 12 августа 2010

Более простым решением было бы разделить его тире - или подчеркиванием _, которые действительны в именах классов CSS. 

<input id='txtPrimary' type='text' class='compare id-txtSecondary'/>
<input id='txtSecondary' type='text' />

<input id='txtPrimary' type='text' class='compare id_txtSecondary'/>
<input id='txtSecondary' type='text' />
...