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

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

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

• См. Также Использование пространств имен с CSS (MSDN)

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

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 \ 26 W \ 3F". Обратите внимание, что Unicode является кодовым эквивалентом ISO 10646 (см. [UNICODE] и [ISO10646]).

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

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

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

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

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

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

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

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

пример:

input#search_formA expression {  }

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

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

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

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

В JSF 2,0 вы можете указать разделитель, используя файл web.xml в качестве параметра инициализации javax.faces.SEPARATOR_CHAR

Прочитай это:

• Можно ли изменить разделитель идентификатора элемента в JSF?

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

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

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

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

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

#search\_forma expression {}

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

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