Исключение, возникающее при попытке выбрать идентификатор CSS, содержащий "|"
Идентификаторы моих элементов управления построены с помощью символов |, но при попытке выбрать элемент управления в блоке с помощью «Найти» он попадает в исключение и не может найти элемент.
Имеет ли | особое значение в CSS?
Где ваш код? Возможно, у вас есть id = "foo|bar" и в атрибуте HTML ID указан недопустимый символ. Проверьте w3.org/TR/html4/types.html 6,2 балла.
В старой спецификации я видел In CSS, identifiers (including element names, classes, and IDs in selectors) can contain only the characters [a-zA-Z0-9] and ISO 10646 characters U+00A1 and higher, plus the hyphen (-) and the underscore (_).
Кажется, это разрешено в HTML5, но просто не может содержать пробелов.
Это действительный идентификатор HTML5, но если вы попробуете document.querySelector("#foo|bar"), вы получите исключение, например Uncaught DOMException: Failed to execute 'querySelector' on 'Document': '#foo|bar' is not a valid selector.
Ну да, потому что | используется в CSS для других целей, как видно из связанного URL.
Спрашивающий спрашивает, | имеет какое-то значение в CSS, и я не знаю, что это такое (я просмотрел ссылку @DarkBee). Может кто-нибудь объяснить?
@AHaworth — в данном случае символ «вертикальной черты» является разделителем пространства имен. Таким образом, селектор foo|bar означает элемент «bar» в пространстве имен, связанном с префиксом «foo». Связь префикса с пространством имен осуществляется с помощью правила @namespace at. При стилизации HTML-документов в этом нет особой необходимости, но это полезная функция для стилизации XML-документов. Подробности см. в разделе CSS-полные имена.
Ответы 1
Да, вертикальная трубка имеет особое значение в CSS. Вам нужно экранировать его внутри селектора идентификатора или класса.
#foo|bar {
color: blue;
}
#bar\|foo {
color: red;
}<div id = "foo|bar">I am not blue</div>
<div id = "bar|foo">I am red</div>