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


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

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

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

8 ответов:

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

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

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

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

пример:

input#search_formA expression {  }

это работает во всех браузерах включая IE6+ (возможно и раньше?), Firefox, Chrome, Opera и др. Это часть стандарт 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", имен шрифтов и URI лежит за пределами этой спецификации. Примечание в в частности, имена элементов нечувствительны к регистру в HTML, но чувствительны к регистру в XML. В CSS идентификаторы (включая имена элементов, классы и идентификаторы в селекторах) могут содержать только символы [a-z0-9] и ISO 10646 символов U+00A1 и выше, а также дефис (-) и подчеркивание (_); они не могут начинаться с цифры или дефиса, за которым следует цифра. Идентификаторы также могут содержать экранированные символы и любой символ ISO 10646 в виде числового кода (см. Следующий пункт). Например, идентификатор - Ч И З?"может быть написано как" 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") Фактически, эти два метода могут быть объединены. Только один символ пробела игнорируется после шестнадцатеричного экранирования. Обратите внимание, что это означает, что "Реал" после последовательности должен сам, либо нейтрализоваться.

если число выходит за пределы диапазона, разрешенного Юникодом (например, "\110000 "выше максимального 10ffff, разрешенного в текущем Юникоде), 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 })
});