Heim > Artikel > Web-Frontend > Wie wende ich Stile gleichzeitig auf mehrere Klassen an?

Wie wende ich Stile gleichzeitig auf mehrere Klassen an?

王林nach vorne: 2023-08-19 09:33:16966Durchsuche

How to apply styles to multiple classes at once?

Um Stile auf mehrere Klassen gleichzeitig anzuwenden, verwenden wir den Punkt-Selektor (.) und das Komma (,). In diesem Artikel verwenden wir den Punkt-Selektor (.) und wählen alle Elemente mit ihren Klassennamen aus mit dem Selektor und getrennt durch ein Komma (,).

„Klasse“ ist ein HTML-Attribut, das eine durch Leerzeichen getrennte Liste von Klassen akzeptiert. Diese Klassen können in CSS verwendet werden, um bestimmte Elemente zu formatieren, oder in Javascript, um diese HTML-Elemente zu bearbeiten.

Beispiel 1

In diesem Beispiel wenden wir die Schriftfarbe „rot“ auf die HTML-Elemente an, die die Klassen „header“ und „para“ haben. Dies erreichen wir, indem wir den Punkt (.) verwenden und sie mit einem Komma (,) verketten.

<!DOCTYPE html>
<html lang="en">
<head>
   <title>How to apply styles to multiple classes at once?</title>
   <style>
      .header, .para {
         color: red;
      }
   </style>
</head>
<body>
   <h3 class="header">How to apply styles to multiple classes at once?</h3>
   <p class="para">Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
</body>
</html>

Beispiel 2

In diesem Beispiel wenden wir die Schriftfarbe auf „Grün“ und den Schriftstil auf „Kursiv“ auf HTML-Elemente mit den Klassennamen „header“ und „para“ an. Um dies zu erreichen, verwenden wir Punkt-Selektoren (.) und verketten sie mit Kommas (,).

<!DOCTYPE html>
<html lang="en">
<head>
   <title>How to apply styles to multiple classes at once??</title>
   <style>
      .header, .para {
         color: green;
         font-style: italic;
      }
   </style>
</head>
<body>
   <h3class="header">How to apply styles to multiple classes at once?</h3>
   <p class="para">Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
</body>
</html>

Fazit

In diesem Artikel haben wir gelernt, wie man mehrere CSS-Klassen gleichzeitig anwendet. Dazu haben wir zunächst mehrere Klassen gleichzeitig ausgewählt, indem wir den vom CSS bereitgestellten Punkt (.)-Selektor verwendet und ihnen dann die erforderlichen Stile im Stylesheet zugewiesen haben .

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

Stellungnahme：

Dieser Artikel ist reproduziert unter:tutorialspoint.com. Bei Verstößen wenden Sie sich bitte an admin@php.cn löschen

Vorheriger Artikel：CSS außerhalb der Anzeige...Nächster Artikel：CSS außerhalb der Anzeige...

In Verbindung stehende Artikel

Mehr sehen