Selettore CSS con punto nell'ID

96

La specifica HTML consente punti (.) In un id:

<img id="some.id" />

Tuttavia, l'utilizzo di una regola di selezione dell'ID CSS non corrisponderà correttamente:

#some.id { color: #f00; }

Le specifiche CSS per i selettori di ID non menzionano questo caso. Quindi presumo che stia usando la combinazione di un nome di tag e un selettore di classe ? Ad esempio, una regola CSS di a.classNamesi applicherebbe a tutti i tag di ancoraggio ( <a>) con un nome di classe di className, come<a class="className"></a> .

È possibile avere una regola del file CSS esterno che fa riferimento a un elemento HTML tramite il suo ID che contiene un punto?

Non mi aspetto dal momento che la specifica CSS specifica che un identificatore CSS " non include il punto come carattere valido. Quindi questa è una mancata corrispondenza fondamentale tra le specifiche HTML e CSS? La mia unica alternativa è utilizzare un diverso tipo di selezione CSS? Qualcuno può più intelligente di me confermare o negare questo?

(Rimuoverei il punto dall'attributo HTML id per semplificare le cose, ma è un id generato dal sistema, quindi non ho la possibilità di cambiarlo in questo caso.)

html  css  css-selectors 
— Jon Adams
fonte
Si potrebbe dire che questa è una mancata corrispondenza fondamentale tra HTML e CSS. Tuttavia, poiché sono due lingue diverse, non è previsto che corrispondano; un identificatore HTML è un identificatore HTML mentre un identificatore CSS è un identificatore CSS. Inoltre, i CSS possono applicare stili anche ad altri linguaggi, non solo all'HTML (sebbene sia scontato, all'inizio CSS è stato creato per l'HTML).
— BoltClock
3
Inoltre #some.idutilizza la combinazione di ID e selettore di classe.
— BoltClock
L'ID è l'unico attributo che hai come hook di stile? So che è un po 'fuori tema, ma mi chiedo perché dovresti usare un ID invece di img o una classe (se disponibile).
— Jayx
@Jayx RE "Perché usare un ID invece di img (tag) o una classe?" Varia per molte ragioni e situazioni. Ma in questo caso, un elemento specifico necessitava di uno stile, non di tutte le immagini sulla pagina. Una classe avrebbe potuto essere utilizzata se l'HTML potesse essere modificato, ma in questo caso non potrebbe essere modificata poiché è stata generata da un sistema al di fuori del nostro controllo.
— Jon Adams

Risposte:

194

Classico. Subito dopo aver esaminato tutte le specifiche per scrivere la domanda, l'ho letta ancora un po 'e ho scoperto che c'è un carattere di fuga. Non ne ho mai avuto bisogno prima, ma le specifiche CSS consentono l' escape della barra rovesciata (\) come la maggior parte dei linguaggi. Cosa sai?

Quindi, nel mio esempio, la seguente regola corrisponderebbe:

#some\.id { color: #f00; }

— Jon Adams
fonte
8
Buon lavoro di ricerca. Dovrebbero esserci più domande e risposte come questa, non come "scrivi il mio codice invece di me".
— Pavlo
3
bella ricerca. Mi sono appena imbattuto in questo in una grande applicazione aziendale su cui sto lavorando. Ero totalmente perplesso e non l'ho mai visto prima. che senso ha creare un documento d'identità con un punto ??
— Anthony
1
@ Anthony: non c'è un motivo specifico per inserire un punto in un attributo id HTML. Immagino che a volte gli autori vogliano solo farlo? Forse in alcuni casi potrebbe essere emerso dai sistemi di implementazione sottostanti che potrebbero utilizzare periodi negli identificatori del codice lato server per l'elaborazione del modulo? Sono sicuro che tutti quelli che lo fanno hanno le proprie ragioni; ma non c'è motivo HTML / CSS per includerli.
— Jon Adams
1
Grazie, ho avuto problemi con OpenLayers poiché utilizza i punti nei suoi ID. Ad esempio: "OpenLayers.Control.Attribution_7". Immagino che aiuti con il codice interno in cui possono avere il nome della variabile javascript lo stesso valore dell'id stesso.
— Hoffmann
3
Stavo valutando di aggiungere una nuova domanda e di scrivere la mia risposta, ma ho deciso di commentare qui. Se stai usando il preprocessore Stylus, devi usare due backslash, ad esempio, #some\\.idper sfuggire al carattere speciale. La prima barra rovesciata viene consumata da Stylus, lasciando la barra rovesciata rimanente nel CSS compilato, che raggiunge il risultato desiderato descritto in questa risposta.
— markrian
Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.