Gestire i due punti in un ID elemento in un selettore CSS


Answers

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

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 possibilmente prima?), Firefox, Chrome, Opera, ecc. Fa parte dello standard CSS2 .

Question

JSF sta impostando l'ID di un campo di input su search_form:expression . Devo specificare un po 'di stile su quell'elemento, ma quel due punti appare come l'inizio di uno pseudo-elemento per il browser in modo che venga contrassegnato come non valido e ignorato. Esiste comunque la fuga dal colon o qualcosa del genere?

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



Ho trovato che questo formato ha funzionato solo per IE7 (anche per 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 })
});




Puoi evaderlo con una barra rovesciata

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

Dalla specifica CSS

4.1.3 Personaggi e caso

Le seguenti regole contengono sempre:

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 "id" 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 distingue tra maiuscole e minuscole in XML. Nei CSS, gli identificatori (compresi i nomi degli elementi, le classi e gli ID nei selettori) possono contenere solo i caratteri [a-z0-9] e ISO 10646 caratteri U + 00A1 e successivi, più il trattino (-) e il carattere di sottolineatura (_) ; 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 "B & W?" può essere scritto come "B \ e W \?" o "B \ 26 W \ 3F". Notare che Unicode è codice per codice equivalente a ISO 10646 (vedere [UNICODE] e [ISO10646]).

In CSS 2.1, un carattere backslash () indica tre tipi di caratteri escape. Per prima cosa, all'interno di una stringa, una barra rovesciata seguita da una nuova riga viene ignorata (vale a dire che la stringa non è considerata contenere la barra rovesciata o la nuova riga).

In secondo luogo, annulla il significato di caratteri speciali CSS. Qualsiasi carattere (tranne una cifra esadecimale) può essere sfuggito con una barra rovesciata per rimuovere il suo significato speciale. Ad esempio, "\" "è una stringa composta da una virgola doppia. I preprocessori dei fogli 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, gli escape di backslash consentono agli autori di fare riferimento a caratteri che non possono essere facilmente inseriti in un documento. In questo caso, il backslash è seguito da al massimo sei cifre esadecimali (0..9A..F), che corrispondono al carattere ISO 10646 ([ISO10646]) con quel numero, che non deve essere zero. (Non è definito nei CSS 2.1 che 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, la fine del numero deve essere effettuata chiaro. Ci sono due modi per farlo:

con uno spazio (o un altro carattere di spazio bianco): "\ 26 B" ("& B"). In questo caso, i programmi utente dovrebbero trattare una coppia "CR / LF" (U + 000D / U + 000A) come un singolo carattere di spazio bianco. fornendo esattamente 6 cifre esadecimali: "\ 000026B" ("& B") In realtà, questi due metodi possono essere combinati. Solo un carattere di spazio bianco viene ignorato dopo una fuga esadecimale. Si noti che questo significa che uno spazio "reale" dopo la sequenza di escape deve essere anch'esso sfuggito o duplicato.

Se il numero non rientra nell'intervallo consentito da Unicode (ad esempio, "\ 110000" è sopra il massimo 10FFFF consentito nell'attuale Unicode), l'UA può sostituire l'escape con il "carattere sostitutivo" (U + FFFD). Se il carattere deve essere visualizzato, l'UA dovrebbe mostrare un simbolo visibile, come un glifo "carattere mancante" (vedere 15.2, punto 5).

Nota: gli escape di backslash, dove consentito, sono sempre considerati parte di un identificatore o di una stringa (ad esempio, "\ 7B" non è punteggiatura, anche se "{" è, e "\ 32" è consentito all'inizio di un nome della classe, anche se "2" non lo è). L'identificatore "te \ st" è esattamente lo stesso identificatore di "test".




Ho avuto lo stesso problema con i due punti e non ero in grado di cambiarli (non potevo 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"] funzionato bene nei selettori jQuery e potrebbe funzionare anche in fogli di stile (potrebbero avere problemi con il browser)




Links