Heim > Artikel > Web-Frontend > Wie wende ich CSS-Stile auf verschiedene Elemente mit demselben Klassennamen in HTML an?

Wie wende ich CSS-Stile auf verschiedene Elemente mit demselben Klassennamen in HTML an?

WBOYnach vorne: 2023-09-13 15:45:07992Durchsuche

HTML-Klassen sind ein globales Attribut, das von HTML-Tags verwendet wird, um eine Liste von Klassen anzugeben, bei denen die Groß-/Kleinschreibung beachtet wird. Diese Klassen werden dann von CSS verwendet, um mit dieser Klasse Stile auf bestimmte Tags anzuwenden, und von Javascript, um das Verhalten, die Interaktivität oder den Stil von HTML-Elementen zu manipulieren.

Methode 1; Punktauswahl (.) verwenden

Bei dieser Methode verwenden wir einfach die Punktauswahl (.), um mehrere Elemente mit demselben Klassennamen auszuwählen und mithilfe von CSS denselben Stilsatz auf sie anzuwenden.

Beispiel

In diesem Beispiel wählen wir das „p“-Tag und das „span“-HTML-Tag mithilfe ihrer Klassen aus und weisen ihnen mithilfe von CSS die Textfarbe „Rot“ zu.

<!DOCTYPE html>
<html lang="en">
<head>
   <title>How to apply CSS style to the different elements having the same class name in HTML?</title>
   <style>
      .sample {
         color: red;
      }
   </style>
</head>
<body>
   <p class="sample">This is p tag content!</p>
   <span class="sample">This is span tag content!</span>
</body>
</html>

Methode 2: Verwenden Sie das „p“-Tag und das „span“-HTML-Tag

In dieser Methode verwenden wir CSS, um eine Reihe verschiedener Stile auf Elemente mit demselben Klassennamen anzuwenden. Dazu verwenden wir den HTML-Tag-Namen gefolgt von einem Punkt-Selektor (.), um ein bestimmtes Element auszuwählen und ihm den erforderlichen CSS-Stil zu geben.

Beispiel

In diesem Beispiel wählen wir das „p“-Tag und das „span“-HTML-Tag mithilfe ihrer Klassen aus und geben ihnen mithilfe von CSS unterschiedliche Textfarben.

<!DOCTYPE html>
<html lang="en">
<head>
   <title>How to apply CSS style to the different elements having the same class name in HTML?</title>
   <style>
      p.sample {
         color: red;
      }
      span.sample {
         color: green;
      }
   </style>
</head>
<body>
   <p class="sample">This is p tag content!</p>
   <span class="sample">This is span tag content!</span>
</body>
</html>

Fazit

In diesem Artikel haben wir gelernt, wie man HTML-Elemente aus Klassennamen auswählt und wie man mit zwei verschiedenen Methoden dieselben und unterschiedliche CSS-Stile auf sie anwendet. Bei der ersten Methode verwenden wir den Punktwähler (.), um mehrere Elemente mit demselben Klassennamen auszuwählen und denselben Stil auf sie anzuwenden. Bei der zweiten Methode wenden wir verschiedene CSS-Stile auf Elemente mit demselben Klassennamen an, indem wir den HTML-Tag-Namen gefolgt von einem Punkt-Selektor (.) verwenden.

Das obige ist der detaillierte Inhalt vonWie wende ich CSS-Stile auf verschiedene Elemente mit demselben Klassennamen in HTML an?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

JavaScript css html 选择器

Stellungnahme：

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

Vorheriger Artikel：Warum Sie eine Audio-Rendering-Dokumentation benötigenNächster Artikel：Warum Sie eine Audio-Rendering-Dokumentation benötigen

In Verbindung stehende Artikel

Mehr sehen