Come assegnare più classi a un contenitore HTML? [chiuso]

398

È possibile assegnare più classi a un singolo HTMLcontenitore?

Qualcosa di simile a:

<article class="column, wrapper">

html class

— ARGO
fonte

Che problema hai ora? Qualunque sia la soluzione a questo problema. Qualsiasi altro problema può dipendere da diversi fattori.

— Aurelio De Rosa,

1

Sebbene ciò sia fattibile, di solito uso contenitori nidificati con eredità CSS. È molto più bello e di solito più utile.

— Jonathan Henson il

Se dopo la rimozione della virgola hai ancora problemi, ti suggerisco di consultare la guida sul perché le regole non funzionano . Ho trovato il dosso più comune per me è la situazione descritta lì come "Uso di una popografia stenografica" (ovvero, il ripristino implicito di un valore predefinito)

— LJ in New Jersey

531

Rimuovi la virgola in questo modo:

<article class="column wrapper">

— Aurelio De Rosa
fonte

3

— Andre Elrico,

1

Strano il suo spazio al posto delle virgole. Ma sì, grazie per la risposta

— Soham Mehta,

188

Dallo standard

7.5.2 Identificatori di elementi: gli attributi id e class

Definizioni degli attributi

id = name [CS]
Questo attributo assegna un nome a un elemento. Questo nome deve essere univoco in un documento.

class = cdata-list [CS]
Questo attributo assegna un nome di classe o un set di nomi di classe a un elemento. A qualsiasi numero di elementi può essere assegnato lo stesso nome o nomi di classe. I nomi di più classi devono essere separati da spazi bianchi.

Sì, basta inserire uno spazio tra di loro.

<article class="column wrapper">

Naturalmente, ci sono molte cose che puoi fare con l'ereditarietà CSS. Ecco un articolo per ulteriori letture .

— Jonathan Henson
fonte

3

Come dovrebbe aspettarsi un browser di reagire se un elemento è assegnato a più classi che impostano valori diversi per gli stessi attributi? Esiste un ordine di precedenza per quello?

— EternallyCurious

6

@JonathanHenson: no, non lo è. In caso di specificità legata, vince la regola che si verifica successivamente nel CSS.

— Ulrich Schwarz,

1

@UlrichSchwarz la classe CSS elencata in seguito (cosa speravo quando l'ho provato) o più tardi in tutti i file CSS? Perché il primo sicuramente non funziona nei browser in cui ho provato, mentre ho verificato la seconda ipotesi.

— Jonathan Henson,

9

@JonathanHenson: Secondo le specifiche CSS 2.1 , "se due dichiarazioni hanno lo stesso peso, origine e specificità, quest'ultima specifica vince. Le dichiarazioni nei fogli di stile importati sono considerate prima di qualsiasi dichiarazione nel foglio di stile stesso." Quindi è un ordine di dichiarazione CSS. I nomi nell'attributo class non hanno un ordine specificato, poiché .fooè zucchero sintattico per [class ~= foo] ref , " fooè una parola classnell'attributo".

— Ulrich Schwarz,

1

@UlrichSchwarz Grazie per il chiarimento.

— Jonathan Henson,

18

Per assegnare più classi a un elemento html , includi entrambi i nomi delle classi tra virgolette dell'attributo class e separali da uno spazio:

<article class="column wrapper">

Nell'esempio sopra, columne wrappersono due classi css separati, e entrambe le loro proprietà verrà applicato al articleelemento.

— Webeng
fonte

16

cosa differisce da questa risposta dalla precedente?

— Iván Rodríguez Torres,

-2

devi mettere un punto tra la classe come

class = "column.wrapper">

— tra Kumar
fonte