Обработка двоеточия в идентификаторе элемента в селекторе CSS [дубликат]

этот вопрос уже есть ответ здесь:

JSF устанавливает идентификатор поля ввода в search_form:expression. Мне нужно указать некоторый стиль на этом элементе, но этот двоеточие выглядит как начало псевдо-элемента в браузере поэтому он помечается как недопустимый и игнорируется. Есть ли способ избежать толстой кишки или что-то в этом роде?

input#search_form:expression {
  ///...
}

8 ответов


обратная косая черта:

input#search_form\:expression {  ///...}

С помощью обратной косой черты перед двоеточием не работает во многих версиях IE (особенно 6 и 7; возможно, другие).

обходным путем является использование шестнадцатеричного кода для двоеточия-который является \3A

пример:

input#search_formA expression {  }

это работает во всех браузерах включая IE6+ (возможно и раньше?), Firefox, Chrome, Опера, etc. Это часть стандартные спецификации CSS2.


в этой статье расскажет вам, как избежать любого символа в CSS.

Теперь есть даже инструмент для этого:http://mothereff.in/css-escapes#0search%5fform%3Aexpression

TL; DR все остальные ответы на этот вопрос неверны. Вам нужно избежать как подчеркивания (чтобы предотвратить полное игнорирование правила IE6 в некоторых крайних случаях), так и символа двоеточия для правильной работы селектора в разных броузеры.

технически, символ двоеточия может быть сбежал как \:, но это не работает в IE a:

#search\_forma expression {}

вы можете защитить его с обратной косой чертой

input#search_form\:expression {
  ///...
}

С CSS Spec

4.1.3 символы и регистр

следующие правила всегда держать:

все таблицы стилей CSS нечувствительны к регистру, за исключением частей, которые не находятся под контролем CSS. Например, чувствительность к регистру значений атрибутов HTML "id" и "class", имен шрифтов и URIs лежит за пределами этой спецификации. Примечание в в частности, имена элементов не учитывают регистр в HTML, но учитывают регистр в XML. В CSS идентификаторы (включая имена элементов, классы и идентификаторы в селекторах) могут содержать только символы [a-z0-9] и ISO 10646 символов U+00A1 и выше, а также дефис (-) и подчеркивание (_); они не могут начинаться с цифры или дефиса, за которым следует цифра. Идентификаторы также могут содержать экранированные символы и любой символ ISO 10646 в виде числового кода (см. Следующий элемент). Например, идентификатор "B&W?"может быть написано как" B\&W\?"или" B\26 W\3F". Обратите внимание, что Unicode-это код по коду, эквивалентный ISO 10646 (см. [UNICODE] и [ISO10646]).

в CSS 2.1 символ обратной косой черты () указывает на три типа экранирования символов. Во-первых, внутри строки обратная косая черта, за которой следует новая строка, игнорируется (т. е. строка считается не содержащей ни обратной косой черты, ни новой строки).

во-вторых, он отменяет значение специальных символов CSS. Любой символ (кроме шестнадцатеричного цифра) может быть экранирована с обратной косой чертой, чтобы удалить ее особый смысл. Например, " \ "" - это строка, состоящая из одной двойной кавычки. Препроцессоры таблицы стилей не должны удалять эти обратные косые черты из таблицы стилей, так как это изменит значение таблицы стилей.

в-третьих, обратные косые черты позволяют авторам ссылаться на символы, которые они не могут легко поместить в документ. В этом случае за обратной косой чертой следует не более шести шестнадцатеричных цифр (0..9А..F), которые стоят Для ISO 10646 ([ISO10646]) символ с этим числом, которое не должно быть нулевым. (В CSS 2.1 не определено, что произойдет, если таблица стилей содержит символ с нулевой кодовой точкой Unicode.) Если символ в диапазоне [0-9a-f] следует за шестнадцатеричным числом, конец числа должен быть ясен. Есть два способа сделать это:

с пробелом (или другим символом пробела): "\26 B" ("&B"). В этом случае агенты пользователей должны рассматривать пару" CR/LF " (U+000D/U+000A) как один пробел характер. предоставляя ровно 6 шестнадцатеричных цифр: "\000026B " ("&B") Фактически, эти два метода могут быть объединены. После шестнадцатеричного побега игнорируется только один символ пробела. Обратите внимание, что это означает, что "Реал" после последовательности должен сам, либо нейтрализоваться.

если число находится вне диапазона, разрешенного Unicode (например, "\110000 "выше максимального 10ffff, разрешенного в текущем Unicode), UA может заменить escape на" replacement характер " (U+FFFD). Если символ должен быть отображен, UA должен показать видимый символ, такой как глиф" отсутствующий символ " (ср. 15.2 пункт 5).

Примечание: обратные косые черты, где разрешено, всегда считаются частью идентификатора или строки (т. е. "\7B" не является пунктуацией, даже если "{" есть, и "\32" разрешено в начале имени класса, даже если "2" нет). Идентификатор " te\st "в точности совпадает с идентификатором"test".


в JSF 2,0 вы можете указать разделитель с помощью web.xml-файл как init-param javax.сталкиваться.SEPARATOR_CHAR

читать это:


У меня была такая же проблема с двоеточиями, и я не смог их изменить (не смог получить доступ к коду, опережающему двоеточия), и я хотел получить их с селекторами CSS3 с помощью jQuery.

Я положил его здесь, потому что это может быть полезным для кого-то

input[id="something:something"] отлично работал в селекторах jQuery, и он также может работать в таблицах стилей (могут быть проблемы с браузером)


Я работаю в структуре ADF, и мне часто приходится использовать JQuery для выбора элементов. Этот формат работает для меня. Это работает и в IE8.

$('[id*="gantt1::majorAxis"]').css('border-top', 'solid 1px ' + mediumGray);

Я обнаружил, что только этот формат работал для меня для IE7 (Firefox тоже), и я использую JSF/Icefaces 1.8.2.

Say form id=FFF, element id=EEE

var jq=jQuery.noConflict();
jq(document).ready(function() {
jq("[id=FFF:EEE]").someJQueryLibFunction({ jQuery lib function options go here })
});