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

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

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

Ответ 2

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

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

Пример:

input#search_form\3A expression {  }

Это работает во всех браузерах: включая IE6 + (и, возможно, раньше?), Firefox, Chrome, Opera и т.д. Это часть стандарт CSS2.

Ответ 3

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

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

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

Технически, символ двоеточия может быть экранирован как \:, но это не работает в IE < 8, поэтому вы должны использовать \3a:

#search\_form\3a expression {}

Ответ 4

Вы можете избежать этого с помощью обратного слэша

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

Из Спецификация CSS

4.1.3. Символы и случай

Всегда сохраняются следующие правила:

Все таблицы стилей CSS нечувствительны к регистру, за исключением частей, которые не находятся под контролем CSS. Например, чувствительность к регистру значений атрибутов HTML "id" и "class", имен шрифтов и URI не выходит за рамки этой спецификации. Обратите внимание, в частности, что имена элементов нечувствительны к регистру в 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..9A..F), которые обозначают символ ISO 10646 ([ISO10646]) с этим номером, который не должен быть равен нулю. (Это значение undefined в CSS 2.1, что произойдет, если таблица стилей содержит символ с кодовым нулевым кодом Unicode.) Если символ в диапазоне [0-9a-f] следует шестнадцатеричному числу, конец номера должен быть ясно. Это можно сделать двумя способами:

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

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

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

Ответ 6

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

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

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

Ответ 7

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

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

Ответ 8

Я нашел, что только этот формат работал у меня для 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 })
});