DigitalOcean bietet Cloud-Produkte für jede Phase Ihrer Reise. Starten Sie mit 200 $ kostenlosem Guthaben!
Ein Typselektor (manchmal auch als Elementtypselektor bezeichnet) passt zu Elementen mit dem entsprechenden Elementknotennamen, wie z. B. den Tags <p>, <span> und <div>. Typselektoren werden generell verwendet, um „breite“ Änderungen am Stil einer Website vorzunehmen.
p { /* "p" is the type selector */
margin: 0 0 1em 0;
}Gängige Verwendung
Oft werden Typselektoren als Standardwerte festgelegt, z. B. in einem CSS-Reset, bei dem die Absicht darin besteht, die Standardwerte des Browsers zu überschreiben. Ein Beispiel aus der ersten Zeile von normalize.css, einem beliebten CSS-Reset
article, aside, details, figcaption, figure, footer, header,
main, nav, section, summary {
display: block;
}Die obigen Typselektoren setzen die `display`-Eigenschaft dieser Tags auf `block`, sodass sie jedes Mal, wenn sie auf der Website verwendet werden, als `block` angezeigt werden, es sei denn, sie werden durch einen spezifischeren Stil überschrieben.
Bewährte Praktiken
Es gilt im Allgemeinen als schlechte Praxis, Detailänderungen ausschließlich mit einem Typselektor vorzunehmen. Zum Beispiel wäre die pauschale Anwendung der Eigenschaft „`color: white`“ auf alle <div>-Tags auf praktisch keiner Website nützlich. Dies liegt daran, dass <div>-Tags generisch sind und auf Websites für verschiedene Zwecke verwendet werden.
Mit einem Typselektor wie body { } ist es jedoch üblich, eine Standard-font-size und line-height festzulegen. Dies liegt teilweise daran, dass auf jeder Seite nur ein <body>-Tag vorhanden sein kann, wodurch die Konfliktmöglichkeiten geringer sind.
Typselektor-Spezifität und Leistung
Typselektoren befinden sich auf der niedrigsten Ebene der Spezifitätskaskade (allgemein als 0, 0, 0, 1 geschrieben), was bedeutet, dass fast alles den über einen reinen Typselektor angewendeten Stil überschreibt, und das Hinzufügen eines Typselektors zu einer Klasse oder ID in Ihrem CSS nur minimale zusätzliche Spezifität bietet.
Typselektoren rangieren auch niedriger auf der CSS-Leistungsskala als Klassen und IDs. Daher ist es technisch gesehen eine bessere Wahl für die Leistung, eine Klasse oder eine ID anstelle des generischeren Typselektors zu verwenden (obwohl der tatsächliche Geschwindigkeitsunterschied typischerweise vernachlässigbar ist).
Weitere Ressourcen
- MDN
- CSS-Tricks-Artikel über CSS-Leistung
Browser-Unterstützung
| Chrome | Safari | Firefox | Opera | IE | Android | iOS |
|---|---|---|---|---|---|---|
| Alle | Alle | Alle | Alle | Alle | Alle | Alle |