movimentazione css id e classi con spazi

Question

ho un paragrafo come

<p id="para one" class="paragraph one">Content</p> 

Come si fa a rappresentare l'ID e la classe con gli spazi nel css

Quando uso

#para#one{ 
} 

.paragraph.one{ 
} 

E ' non funziona con i CSS sopra.

Answer 1

class="paragraph one" 

rappresenta in realtà due classi diverse

id="para one" 

non funziona, ma probabilmente finirete per avere un id effettivo di para

Answer 2

Non è possibile avere spazi nei valori id o nomi di classe. Quando si dispone di spazi nel valore della class attributo specifica più classi che si applicano a tale elemento:

<p class="paragraph one"> <!--Has both "paragraph" and "one" class--> 

Per quanto riguarda id valori, le regole (HTML4) affermare quanto segue:

ID e I token NAME devono iniziare con una lettera ([A-Za-z]) e possono essere seguiti da un numero qualsiasi di lettere, cifre ([0-9]), trattini ("-"), caratteri di sottolineatura ("_") , due punti (":") e punti (".").

Come si può vedere, gli spazi non sono validi. Il HTML5 spec è più leniant, ma gli spazi non sono ancora ammessi (enfasi aggiunta):

attributo

L'ID specifica identificatore unico del suo elemento (ID). Il valore deve essere univoco tra tutti gli ID nella sottostruttura home dell'elemento e deve contenere almeno un carattere. Il valore non deve contenere caratteri di spazio.

Answer 3

La classe CSS è corretta. Non hai una classe con uno spazio, hai due classi, "paragrafo" e "una". Il tuo CSS seleziona correttamente gli elementi che hanno entrambe le classi:

.paragraph.one { color: red; } 

Questa è una tecnica utile per la divisione fuori sfaccettature dell'elemento in classi separate che possono essere combinati singolarmente. Si noti inoltre che lo <p class="one paragraph"> corrisponderà allo stesso selettore.

Answer 4

È semplicemente non può avere spazi. Se usi uno spazio vuol dire che stai usando due classi diverse. Uno è para e l'altro è one.

Answer 5

Mi sono imbattuto proprio in questo (disegno una pagina esistente senza possibilità di modificare l'id).

Questo è quello che ho usato per lo stile che da ID:

p[id='para one']{ 
} 

E, come detto in precedenza, .paragraph.one seleziona due classi - questo significa che sarà anche possibile selezionare elementi con class=" one paragraph" e class="not a paragraph this one".

Answer 6

I moderni browser supportano in realtà lo id con spazi. Così su Chrome 54 funziona:

p#para\ one { 
} 

E i moderni browser non supportano la sintassi [id="..."], così

p[id='para one'] { 
} 

non funziona in Chrome 54.