Gestione dei due punti in un ID elemento in un selettore CSS [duplicato]

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

  •  02-07-2019
  •  | 
  •  

Domanda

    

Questa domanda ha già una risposta qui:

         

JSF sta impostando l'ID di un campo di input su search_form:expression. Ho bisogno di specificare un certo stile su quell'elemento, ma i due punti sembrano l'inizio di uno pseudo-elemento nel browser, quindi viene contrassegnato come non valido e ignorato. Esiste un modo per sfuggire al colon o qualcosa del genere? 

input#search_form:expression {
  ///...
}
È stato utile?

Soluzione

Barra rovesciata: 

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

Altri suggerimenti

L'uso di una barra rovesciata prima dei due punti non funziona in molte versioni di IE (in particolare 6 e 7; forse altre).

Una soluzione alternativa consiste nell'utilizzare il codice esadecimale per i due punti, che è \ 3A

Esempio: 

input#search_form\3A expression {  }

Funziona su tutti i browser: incluso IE6 + (e forse prima?), Firefox, Chrome, Opera, ecc. Fa parte di standard CSS2 .

Questo articolo ti dirà come sfuggire a qualsiasi personaggio nei CSS.

Ora, & # 8217; s persino uno strumento per questo: http://mothereff.in / css-sfugge # 0search% 5fform% 3Aexpression

TL; DR Tutte le altre risposte a questa domanda sono errate. Devi evitare sia il carattere di sottolineatura (per impedire che IE6 ignori del tutto la regola in alcuni casi limite) sia il carattere due punti affinché il selettore funzioni correttamente su diversi browser.

Tecnicamente, il carattere dei due punti può essere sfuggito a \:, ma ciò non & # 8217; t funziona in IE < 8, quindi & # 8217; dovrete usare \3a: 

#search\_form\3a expression {}

Puoi evitarlo con una barra rovesciata 

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

Dalle Specifiche CSS

4.1.3 Personaggi e caso

Le seguenti regole sono sempre valide:

Tutti i fogli di stile CSS non fanno distinzione tra maiuscole e minuscole, ad eccezione delle parti che non sono sotto il controllo dei CSS. Ad esempio, la distinzione tra maiuscole e minuscole dei valori degli attributi HTML & Quot; id & Quot; e " class " ;, dei nomi dei font e degli URI non rientra nell'ambito di questa specifica. Nota in particolare che i nomi degli elementi non fanno distinzione tra maiuscole e minuscole in HTML, ma fanno distinzione tra maiuscole e minuscole in XML. Nel CSS, gli identificatori (inclusi nomi di elementi, classi e ID nei selettori) possono contenere solo i caratteri [a-z0-9] e ISO 10646 caratteri U + 00A1 e versioni successive, più il trattino (-) e il trattino basso (_) ; non possono iniziare con una cifra o un trattino seguito da una cifra. Gli identificatori possono anche contenere caratteri di escape e qualsiasi carattere ISO 10646 come codice numerico (vedere l'elemento successivo). Ad esempio, l'identificatore & Quot; B & Amp; W? & Quot; può essere scritto come " B \ & amp; W \? " oppure " B \ 26 W \ 3F " ;. Si noti che Unicode è codice per codice equivalente a ISO 10646 (vedere [UNICODE] e [ISO10646]).

In CSS 2.1, un carattere barra rovesciata () indica tre tipi di escape carattere. Innanzitutto, all'interno di una stringa, una barra rovesciata seguita da una nuova riga viene ignorata (vale a dire, la stringa viene considerata come non contenente la barra rovesciata o la nuova riga).

In secondo luogo, annulla il significato di caratteri CSS speciali. Qualsiasi carattere (tranne una cifra esadecimale) può essere evitato con una barra rovesciata per rimuoverne il significato speciale. Ad esempio, & Quot; \ & Quot; & Quot; è una stringa composta da una doppia virgoletta. I preprocessori del foglio di stile non devono rimuovere queste barre rovesciate da un foglio di stile poiché ciò cambierebbe il significato del foglio di stile.

In terzo luogo, le escape di barra rovesciata consentono agli autori di fare riferimento a personaggi che non possono facilmente inserire in un documento. In questo caso, la barra rovesciata è seguita da un massimo di sei cifre esadecimali (0..9A..F), che rappresentano il carattere ISO 10646 ([ISO10646]) con quel numero, che non deve essere zero. (Non è definito in CSS 2.1 cosa succede se un foglio di stile contiene un carattere con punto di codice Unicode zero.) Se un carattere nell'intervallo [0-9a-f] segue il numero esadecimale, è necessario creare la fine del numero chiaro. Ci sono due modi per farlo:

con uno spazio (o un altro carattere di spazio): " \ 26 B " (Quot &; & Amp; & B quot;). In questo caso, gli interpreti dovrebbero trattare un & Quot; CR / LF & Quot; coppia (U + 000D / U + 000A) come singolo carattere di spazio bianco. fornendo esattamente 6 cifre esadecimali: " \ 000026B " (Quot &; & Amp; B quot &;) In effetti, questi due metodi possono essere combinati. Solo un carattere di spazio bianco viene ignorato dopo una fuga esadecimale. Nota che questo significa che un & Quot; real & Quot; lo spazio dopo la sequenza di escape deve essere di per sé escape o raddoppiato.

Se il numero è al di fuori dell'intervallo consentito da Unicode (ad esempio, " \ 110000 " è superiore al massimo 10FFFF consentito nell'attuale Unicode), l'UA può sostituire la fuga con " carattere di sostituzione " (U + FFFD). Se il personaggio deve essere visualizzato, UA dovrebbe mostrare un simbolo visibile, come un & Quot; carattere mancante & Quot; glifo (cfr. 15.2, punto 5).

Nota: gli escape di barra rovesciata, ove consentito, sono sempre considerati parte di un identificatore o di una stringa (ovvero, " \ 7B " non è punteggiatura, anche se " { " è e " \ 32 " è consentito all'inizio del nome di una classe, anche se " 2 " non lo è). L'identificatore & Quot; te \ st & Quot; è esattamente lo stesso identificativo di " test " ;.

Ho avuto lo stesso problema con i due punti e non sono riuscito a cambiarli (non ho potuto accedere ai due punti di output del codice) e volevo recuperarli con i selettori CSS3 con jQuery.

L'ho messo qui, perché potrebbe essere utile per qualcuno

input[id="something:something"] ha funzionato bene nei selettori jQuery e potrebbe funzionare anche nei fogli di stile (potrebbe avere problemi con il browser)

In JSF 2,0, è possibile specificare il separatore utilizzando il file web.xml come init-param di javax.faces.SEPARATOR_CHAR

Leggi questo:

Lavoro in un framework ADF e spesso devo usare JQuery per selezionare gli elementi. Questo formato funziona per me. Funziona anche con IE8. 

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

Ho trovato che solo questo formato funzionasse per me su IE7 (anche Firefox) e utilizzo 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 })
});
Autorizzato sotto: CC-BY-SA insieme a attribuzione
Non affiliato a StackOverflow
scroll top