Wie wende ich Stile gleichzeitig auf mehrere Klassen an?-CSS-Tutorial-php.cn

Wie wende ich Stile gleichzeitig auf mehrere Klassen an?

王林

Freigeben： 2023-08-19 09:33:16

nach vorne

1008 Leute haben es durchsucht

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>

Nach dem Login kopieren

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>

Nach dem Login kopieren

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!