it-swarm.com.ru

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

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

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

Backslash:

input#search_form\:expression {  ///...}
106
Mark Cidade

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

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

пример:

input#search_form\3A expression {  }

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

91
jomohke

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

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

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

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

#search\_form\3a expression {}
7
Mathias Bynens

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

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\& W \?" или "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-последовательности должно быть либо экранировано, либо удвоено.

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

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

5
Wayne

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

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

4
Krishna

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

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

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

4
naugtur

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

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