Jak przypisać wiele klas do kontenera HTML? [Zamknięte]


398

Czy można przypisać wiele klas do jednego HTMLkontenera?

Coś jak:

<article class="column, wrapper"> 

Jaki masz teraz problem? Jakikolwiek sposób, który był rozwiązaniem tego problemu. Każdy inny problem może zależeć od kilku czynników.
Aurelio De Rosa

1
Chociaż jest to wykonalne, zwykle używam zagnieżdżonych kontenerów z dziedziczeniem CSS. Jest o wiele ładniejszy i zwykle bardziej użyteczny.
Jonathan Henson

Jeśli po usunięciu przecinka nadal masz problem, sugeruję zapoznanie się ze wskazówkami, dlaczego reguły nie działają . Znalazłem najczęstszą dla mnie prowokację prędkości, opisaną tam sytuację jako „Wykorzystanie stenografii” (tj. Domyślnie przywrócenie wartości domyślnej)
LJ w NJ

Odpowiedzi:


531

Po prostu usuń przecinek w następujący sposób:

<article class="column wrapper"> 

3
<article class = "class1 class2 ... classN">
Andre Elrico

1
Wierd swoją przestrzeń zamiast przecinków. Ale tak, dziękuję za odpowiedź
Soham Mehta

188

Od standardu

7.5.2 Identyfikatory elementów: atrybuty id i klasa

Definicje atrybutów

id = nazwa [CS]
Ten atrybut przypisuje nazwę do elementu. Ta nazwa musi być unikalna w dokumencie.

class = cdata-list [CS]
Ten atrybut przypisuje nazwę klasy lub zestaw nazw klas do elementu. Dowolnej liczbie elementów można przypisać tę samą nazwę lub nazwy klas. Wiele nazw klas musi być oddzielonych spacjami.

Tak, po prostu wstaw odstęp między nimi.

<article class="column wrapper">

Oczywiście istnieje wiele rzeczy, które możesz zrobić dzięki dziedziczeniu CSS. Oto artykuł do dalszego czytania .


3
Jak powinna reagować przeglądarka, jeśli element zostanie przypisany do wielu klas, które ustawiają różne wartości dla tych samych atrybutów. Czy istnieje w tym jakiś priorytet?
EternallyCurious

6
@JathanathanHenson: nie, nie jest. W przypadku powiązanej specyficzności wygrywa reguła, która pojawi się później w CSS.
Ulrich Schwarz

1
@UlrichSchwarz później wymieniona klasa CSS (na co liczyłem, kiedy ją testowałem), czy później we wszystkich plikach CSS? Ponieważ ten pierwszy z pewnością nie działa w przeglądarkach, w których testowałem, podczas gdy testowałem drugą hipotezę.
Jonathan Henson

9
@JathanathanHenson: Zgodnie ze specyfikacją CSS 2.1 „jeśli dwie deklaracje mają tę samą wagę, pochodzenie i specyfikę, ta ostatnia określona wygrywa. Deklaracje w importowanych arkuszach stylów są uważane za poprzedzające jakiekolwiek deklaracje w samym arkuszu stylów”. To jest kolejność deklaracji CSS. Nazwy w atrybucie klasy nie mają określonej kolejności, ponieważ .foojest składniowym cukrem dla [class ~= foo] referencji , „ footo słowo w classatrybucie”.
Ulrich Schwarz

1
@UlrichSchwarz Dziękujemy za wyjaśnienie.
Jonathan Henson

18

Aby przypisać wiele klas do elementu HTML , umieść obie nazwy klas w cudzysłowach atrybutu class i rozdziel je spacją:

<article class="column wrapper"> 

W powyższym przykładzie, columna wrapperdwa oddzielne CSS, i zarówno ich właściwości będą stosowane do articleelementu.


16
czym różni się ta odpowiedź od poprzedniej?
Iván Rodríguez Torres

Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.