Heim > Web-Frontend > CSS-Tutorial > Hauptteil

Wie kombiniere ich Stile für mehrere Klassen in CSS?

Susan Sarandon
Freigeben: 2024-10-30 01:40:02
Original
746 Leute haben es durchsucht

How to Combine Styles for Multiple Classes in CSS?

Stile für mehrere Klassen kombinieren

In CSS ist es oft wünschenswert, dieselben Stileigenschaften auf mehrere Elemente mit unterschiedlichen Klassennamen anzuwenden. Dadurch ist kein sich wiederholender Code erforderlich.

Betrachten Sie den folgenden Code, in dem zwei Klassen, .abc und .xyz, dieselbe margin-left-Eigenschaft haben:

<code class="css">.abc {
  margin-left: 20px;
}

.xyz {
  margin-left: 20px;
}</code>
Nach dem Login kopieren

Um diese Stile zu kombinieren Um eine einzelne Regel zusammenzufassen, verwenden Sie eine durch Kommas getrennte Liste von Klassennamen. Die resultierende Regel wendet dieselben Eigenschaften sowohl auf .abc als auch auf .xyz an:

<code class="css">.abc, .xyz {
  margin-left: 20px;
}</code>
Nach dem Login kopieren

Mit dieser kombinierten Regel können Sie die margin-left-Eigenschaft sowohl für .abc- als auch für .xyz-Elemente steuern und so die Coderedundanz reduzieren Verbesserung der Wartbarkeit.

Das obige ist der detaillierte Inhalt vonWie kombiniere ich Stile für mehrere Klassen in CSS?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Neueste Artikel des Autors
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website:Online-PHP-Schulung für das Gemeinwohl,Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln!