Wie ordne ich einem HTML-Container mehrere Klassen zu? [geschlossen]

398

Ist es möglich, einem einzelnen HTMLContainer mehrere Klassen zuzuweisen ?

Etwas wie:

<article class="column, wrapper">

html class

— ARGO
quelle

Welches Problem hast du jetzt? Wie auch immer, das war die Lösung für dieses Problem. Jedes andere Problem kann von mehreren Faktoren abhängen.

— Aurelio De Rosa

1

Obwohl dies machbar ist, verwende ich normalerweise verschachtelte Container mit CSS-Vererbung. Es ist viel schöner und normalerweise nützlicher.

— Jonathan Henson

Wenn Sie nach dem Entfernen des Kommas immer noch ein Problem haben, empfehlen wir Ihnen, die Anleitung zu lesen, warum Regeln nicht funktionieren . Ich habe festgestellt, dass der häufigste Geschwindigkeitsschub für mich die dort als "Verwendung einer Kurzform" beschriebene Situation ist (dh implizit auf einen Standardwert zurückgesetzt wird)

— LJ in NJ,

531

Entfernen Sie einfach das Komma wie folgt:

<article class="column wrapper">

— Aurelio De Rosa
quelle

3

— Andre Elrico

1

Wierd sein Leerzeichen anstelle von Kommas. Aber ja, danke für die Antwort

— Soham Mehta

188

Aus dem Standard

7.5.2 Elementkennungen: die ID- und Klassenattribute

Attributdefinitionen

id = name [CS]
Dieses Attribut weist einem Element einen Namen zu. Dieser Name muss in einem Dokument eindeutig sein.

class = cdata-list [CS]
Dieses Attribut weist einem Element einen Klassennamen oder eine Reihe von Klassennamen zu. Es können beliebig viele Elemente den gleichen Klassennamen oder Namen haben. Mehrere Klassennamen müssen durch Leerzeichen getrennt werden.

Ja, setzen Sie einfach ein Leerzeichen zwischen sie.

<article class="column wrapper">

Natürlich gibt es viele Dinge, die Sie mit der CSS-Vererbung tun können. Hier ist ein Artikel zur weiteren Lektüre .

— Jonathan Henson
quelle

3

Wie soll ein Browser reagieren, wenn ein Element mehreren Klassen zugewiesen wird, die unterschiedliche Werte für dieselben Attribute festlegen? Gibt es dafür eine Rangfolge?

— EternallyCurious

6

@ JonathanHenson: Nein, das ist es nicht. Bei gebundener Spezifität gewinnt die Regel, die später im CSS auftritt.

— Ulrich Schwarz

1

@UlrichSchwarz die später aufgelistete CSS-Klasse (was ich mir erhofft hatte, als ich dies getestet habe) oder später in allen CSS-Dateien? Weil das erstere mit Sicherheit nicht in den Browsern funktioniert, in denen ich getestet habe, während ich die letztere Hypothese getestet habe.

— Jonathan Henson

9

@JonathanHenson: Gemäß CSS 2.1-Spezifikationen "gewinnt zwei angegebene Deklarationen, wenn sie dasselbe Gewicht, denselben Ursprung und dieselbe Spezifität haben. Deklarationen in importierten Stylesheets gelten als vor Deklarationen im Stylesheet selbst." Es handelt sich also um eine CSS-Deklarationsreihenfolge. Die Namen im Klassenattribut haben keine festgelegte Reihenfolge, da .foosyntaktischer Zucker für [class ~= foo] ref " fooein Wort im classAttribut" ist.

— Ulrich Schwarz

1

@UlrichSchwarz Vielen Dank für die Klarstellung.

— Jonathan Henson

18

Um einem HTML-Element mehrere Klassen zuzuweisen , fügen Sie beide Klassennamen in die Anführungszeichen des Klassenattributs ein und lassen Sie sie durch ein Leerzeichen trennen:

<article class="column wrapper">

In dem obigen Beispiel columnund wrappersind zwei separate CSS - Klassen, und ihre beiden Eigenschaften werden dem angewendet werden articleElement.

— Webeng
quelle

16

Was unterscheidet diese Antwort von der vorherigen?

— Iván Rodríguez Torres

-2

Sie müssen einen Punkt zwischen die Klasse wie setzen

class = "column.wrapper">

— Amit Kumar
quelle