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

StackOverflow https://stackoverflow.com/questions/122238

  •  02-07-2019
  •  | 
  •  

Вопрос

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

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

input#search_form:expression {
  ///...
}
Это было полезно?

Решение

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

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

Другие советы

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

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

пример:

input#search_form\3A expression {  }

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

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

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

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

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

#search\_form\3a expression {}

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

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 символ обратной косой черты () указывает на три типа escape-символов.Во-первых, внутри строки игнорируется обратная косая черта, за которой следует новая строка (т. е. считается, что строка не содержит ни обратной косой черты, ни новой строки).

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

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

с пробелом (или другим символом пробела):«\26 Б» («&Б»).В этом случае пользовательские агенты должны рассматривать пару «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».

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

Выкладываю сюда, может кому-то будет полезно

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

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

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

Я работаю в среде 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 })
});
Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top