Manipulation d'un côlon Dans un ID d'élément dans un sélecteur CSS [dupliquer]

cette question a déjà une réponse ici:

JSF définit L'ID d'un champ d'entrée à search_form:expression . Je dois spécifier un style sur cet élément, mais ce côlon ressemble à la début d'un pseudo-élément dans le navigateur pour qu'il soit marqué invalide et ignoré. Est-il de toute façon à s'échapper du colon ou de quelque chose?

input#search_form:expression {
  ///...
}
131
demandé sur BoltClock 2008-09-23 20:47:20
la source

8 ответов

barre Oblique inverse:

input#search_form\:expression {  ///...}
102
répondu Mark Cidade 2008-09-23 20:52:40
la source

utiliser un antislash avant le colon ne fonctionne pas dans de nombreuses versions D'IE (en particulier 6 et 7; peut-être d'autres).

une solution consiste à utiliser le code hexadécimal pour le deux - points-qui est \3A

exemple:

input#search_formA expression {  }

cela fonctionne dans tous les navigateurs: y compris IE6+ (et peut-être plus tôt?), Firefox, Chrome, Opera,etc. Il fait partie de la norme CSS2 .

88
répondu jomohke 2015-02-18 02:01:19
la source

cet article vous dira comment échapper à n'importe quel personnage dans CSS.

maintenant, il y a même un outil pour ça: http://mothereff.in/css-escapes#0search%5fform%3Aexpression

TL; DR toutes les autres réponses à cette question sont incorrectes. Vous devez échapper à la fois le caractère underscore (pour empêcher IE6 d'ignorer la règle dans certains cas de bord) et le caractère colon Pour que le sélecteur fonctionne correctement sur différents navigateurs.

techniquement, le caractère colon peut être échappé en tant que \: , mais cela ne fonctionne pas dans IE < 8, donc vous devrez utiliser a :

#search\_forma expression {}
5
répondu Mathias Bynens 2012-03-30 13:05:51
la source

Vous pouvez échapper avec une barre oblique inverse

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

De la CSS

4.1.3 caractères et majuscules

les règles suivantes s'appliquent toujours:

toutes les feuilles de style CSS sont insensibles à la casse, sauf les pièces qui ne sont pas sous le contrôle de CSS. Par exemple, la sensibilité des valeurs des attributs HTML "id" et" class", de la police les noms et les URIs n'entrent pas dans le champ d'application de la présente spécification. Notez en particulier que les noms d'éléments sont insensibles à la casse en HTML, mais sensibles à la casse en XML. Dans les CSS, les identificateurs (y compris les noms d'éléments, les classes et les identificateurs dans les sélecteurs) ne peuvent contenir que les caractères [a-z0-9] et les caractères ISO 10646 U+00A1 et supérieurs, plus le trait d'Union (-) et le caractère de soulignement (_); ils ne peuvent pas commencer par un chiffre, ou un trait d'Union suivi d'un chiffre. Les identificateurs peuvent aussi contenir des caractères échappés et n'importe quel ISO 10646 caractère d'un code numérique (voir point suivant). Par exemple, l'identificateur " B & W?"peut être écrit comme" B\ & W\?"ou"B\26 W\3F". Il convient de noter Qu'Unicode est un code par code équivalent à la norme ISO 10646 (voir [UNICODE] et [ISO10646]).

dans CSS 2.1, un caractère backslash () indique trois types de caractères échappés. Tout d'abord, à l'intérieur d'une chaîne, une barre oblique inversée suivie d'une nouvelle ligne est ignorée (c.-à-d. que la chaîne est réputée ne pas contenir la barre oblique inversée ou la nouvelle ligne).

Deuxièmement, il annule la signification des caractères CSS Spéciaux. N'importe quel caractère (sauf un chiffre hexadécimal) peut être échappé avec un antislash pour enlever sa signification spéciale. Par exemple, "\"" est une chaîne composée d'un double guillemet. Les préprocesseurs de feuilles de style ne doivent pas supprimer ces antislashes d'une feuille de style car cela changerait la signification de la feuille de style.

Troisièmement, les escapes antislash permettent aux auteurs de se référer à des caractères qu'ils ne peuvent pas facilement mettre dans un document. Dans ce cas, la barre oblique inversée est suivie d'au plus six chiffres hexadécimaux (0..9A..F), qui représentent le caractère ISO 10646 ([ISO10646]) avec ce numéro, qui ne doit pas être zéro. (Il n'est pas défini dans CSS 2.1 que se passe-t-il si une feuille de style contient un caractère avec le codepoint Unicode zéro.) Si un caractère dans la gamme [0-9a-f] suit le nombre hexadécimal, la fin du nombre doit être clarifiée. Il y a deux façons de le faire:

avec un espace (ou un autre caractère d'espacement): "\26 B"("&B"). Dans ce cas, les agents utilisateurs doivent traiter une paire "CR/LF" (U+000D/U+000A) comme un seul caractère d'espace. en fournissant exactement 6 chiffres hexadécimaux:" \000026B " ("&B") En fait, ces deux méthodes peuvent être combinées. Un seul caractère d'espace est ignoré après une évasion hexadécimale. Notez que cela signifie qu'un "vrai" espace après la séquence d'échappement doit lui-même être échappé ou doublé.

si le nombre est en dehors de la plage autorisée par Unicode (par exemple, "\110000 "est supérieur au maximum de 10FFFF autorisé en Unicode courant), L'UA peut remplacer l'échappement par le" caractère de remplacement " (U+FFFD). Si le caractère doit être affiché, L'UA doit montrer un symbole visible, tel qu'un glyphe "caractère manquant" (cf. 15.2, point 5).

Note: les antislash escapes, lorsqu'elles sont autorisées, sont toujours considérées comme faisant partie d'un identifiant ou d'une chaîne (c'est-à-dire que "\7B" n'est pas une ponctuation, même si " {"Est, et" \32 " est autorisé au début d'une classe nom, même si " 2 " ne l'est pas). L'identificateur " te\st "est exactement le même que"test".

4
répondu Wayne 2008-09-23 20:58:36
la source

dans JSF 2,0, vous pouvez spécifier le séparateur en utilisant le web.fichier xml comme init-param de javax.face.SÉPARATEUR_BAR_151910920"

Lire:

4
répondu Krishna 2017-05-23 14:54:29
la source

j'ai eu le même problème avec les colons, et je n'ai pas pu les changer (je n'ai pas pu accéder au code qui émettait les colons) et je voulais les récupérer avec des sélecteurs CSS3 avec jQuery.

je l'ai mis ici, parce qu'il pourrait être utile pour quelqu'un

input[id="something:something"] fonctionnait bien dans les sélecteurs jQuery, et il pourrait fonctionner dans les feuilles de style aussi bien (pourrait avoir des problèmes de navigateur)

3
répondu naugtur 2010-02-09 14:42:09
la source

je travaille dans un cadre ADF et je dois souvent utiliser JQuery pour sélectionner des éléments. Ce format fonctionne pour moi. Cela fonctionne aussi dans IE8.

$('[id*="gantt1::majorAxis"]').css('border-top', 'solid 1px ' + mediumGray);
0
répondu mbokil 2014-02-24 23:11:44
la source

j'ai trouvé que seul ce format a fonctionné pour moi pour IE7 (Firefox aussi), et j'utilise 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 })
});

-1
répondu Charles 2011-06-03 23:22:48
la source

Autres questions sur css jsf css-selectors