Селектор CSS с точкой в ​​идентификаторе

97

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

<img id="some.id" />

Однако использование правила селектора идентификатора CSS не будет соответствовать правильно:

#some.id { color: #f00; }

В спецификации CSS для селекторов идентификаторов этот случай не упоминается. Итак, я полагаю, он использует комбинацию имени тега и селектора класса ? Например, правило CSS a.classNameбудет применяться ко всем тегам привязки ( <a>) с именем класса className, например <a class="className"></a>.

Возможно ли иметь правило внешнего файла CSS, которое ссылается на элемент HTML по его идентификатору, в котором есть точка?

Я не ожидаю этого, поскольку спецификация CSS указывает, что « идентификатор » CSS не включает точку как допустимый символ. Так это фундаментальное несоответствие между спецификациями HTML и CSS? Единственная альтернатива - использовать другой тип выбора CSS? Может ли кто-нибудь умнее меня подтвердить или опровергнуть это?

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

html css css-selectors Джон Адамс
источник
Можно сказать, что это фундаментальное несоответствие между HTML и CSS. Однако, поскольку это два разных языка, не ожидается, что они совпадают; Идентификатор HTML - это идентификатор HTML, а идентификатор CSS - это идентификатор CSS. Кроме того, CSS может стилизовать и другие языки, а не только HTML (хотя, конечно, CSS изначально был создан для HTML).
BoltClock
3
Также #some.idиспользуется комбинация идентификатора и селектора класса.
BoltClock
Идентификатор - единственный атрибут, который у вас есть как привязка стиля? Я знаю, что это немного не по теме, но мне интересно, почему вы хотите использовать идентификатор вместо img или класса (если он доступен).
Jayx 06
@Jayx RE "Зачем использовать ID вместо img (тега) или класса?" Это бывает по разным причинам и ситуациям. Но в этом случае необходимо стилизовать определенный элемент, а не все изображения на странице. Класс можно было бы использовать, если бы HTML можно было изменить, но в этом случае его нельзя было изменить, поскольку он был создан системой, находящейся вне нашего контроля.
Джон Адамс,

Ответы:

194

Классический. Сразу после того, как я покопался во всех спецификациях, написав вопрос, я прочитал еще немного и обнаружил, что есть escape-символ. Я никогда не нуждался в этом раньше, но спецификация CSS допускает экранирование обратной косой черты (\), как и в большинстве языков. Что ты знаешь?

Итак, в моем примере будет соответствовать следующее правило:

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

Джон Адамс
источник
8
Хорошая исследовательская работа. Должно быть больше подобных вопросов и ответов, а не типа «напиши мой код вместо меня».
Павло
3
хорошее исследование. Я только что наткнулся на это в большом корпоративном приложении, над которым я работал. Я был в полном тупике и никогда раньше этого не видел. какой смысл делать id с точкой ??
Энтони
1
@Anthony: Нет особой причины ставить точку в атрибуте HTML id. Я думаю, иногда авторы просто хотят? Может быть, в некоторых случаях он может вытекать из базовых систем реализации, которые могут использовать точки в идентификаторах серверного кода для обработки формы? Я уверен, что у каждого есть свои причины; но нет причин включать их в HTML / CSS.
Джон Адамс,
1
Спасибо, у меня были проблемы с OpenLayers, так как он использует точки в своих идентификаторах. Например: «OpenLayers.Control.Attribution_7». Я думаю, это помогает с внутренним кодом, где они могут иметь имя переменной javascript, такое же значение, как и сам идентификатор.
Hoffmann
3
Я подумывал добавить новый вопрос и написать свой ответ, но решил просто прокомментировать здесь. Если вы используете препроцессор Stylus, вам нужно использовать две обратные косые черты, например, #some\\.idдля экранирования специального символа. Первая обратная косая черта используется Stylus, оставляя оставшуюся обратную косую черту в скомпилированном CSS, что обеспечивает желаемый результат, описанный в этом ответе.
Маркриан
22

Вы также можете использовать img [id = some.id]]

Подробнее здесь: http://www.w3.org/TR/selectors/#attribute-selectors

SDD512
источник
1
Это может работать в некоторых браузерах, но я также видел ошибки, возникающие для селекторов атрибутов. Вы все еще можете избежать ., как \.будто.
Крис Джейнс,