HTML-Klassen-Globales Attribut
Das class
-Attribut globales Attribut ist eine Liste der Klassen des Elements, getrennt durch ASCII-Leerzeichen.
Probieren Sie es aus
<p>Narrator: This is the beginning of the play.</p> <p class="note editorial">Above point sounds a bit obvious. Remove/rewrite?</p> <p>Narrator: I must warn you now folks that this beginning is very exciting.</p> <p class="note">[Lights go up and wind blows; Caspian enters stage right]</p>
.note { font-style: italic; font-weight: bold; } .editorial { background: rgb(255 0 0 / 0.25); padding: 10px; } .editorial::before { content: "Editor: "; }
Syntax
Das class
-Attribut ist eine Liste von Klassenwerten, die durch ASCII-Leerzeichen getrennt sind.
Jeder Klassenwert kann beliebige Unicode-Zeichen enthalten (außer natürlich ASCII-Leerzeichen). Wenn jedoch in CSS-Selektoren, entweder von JavaScript unter Verwendung von APIs wie Document.querySelector()
oder in CSS-Stylesheets, Klassenattributwerte verwendet werden, müssen diese gültige CSS-Bezeichner sein. Das bedeutet, dass ein Klassenattributwert, der kein gültiger CSS-Bezeichner ist (z.B. my?class
oder 1234
), vor der Verwendung in einem Selektor entweder mit der Methode CSS.escape()
oder manuell maskiert werden muss.
Aus diesem Grund wird empfohlen, dass Entwickler Werte für Klassenattribute wählen, die gültige CSS-Bezeichner sind und kein Maskieren erfordern.
Beschreibung
Klassen ermöglichen es CSS und JavaScript, spezifische Elemente über die Klassen-Selektoren oder Funktionen wie document.getElementsByClassName()
auszuwählen und darauf zuzugreifen.
Obwohl die Spezifikation keine Anforderungen an die Namen von Klassen stellt, wird Webentwicklern empfohlen, Namen zu verwenden, die den semantischen Zweck des Elements beschreiben, anstatt die Präsentation des Elements. Zum Beispiel, attribute um ein Attribut zu beschreiben, anstatt italics, obwohl ein Element dieser Klasse möglicherweise in Kursiv dargestellt wird. Semantische Namen bleiben auch dann logisch, wenn sich die Präsentation der Seite ändert.
Spezifikationen
Specification |
---|
HTML # global-attributes:classes-2 |