Geben Sie - ein CSS-Tricks | CSS-Almanach 2025

Ein Typwähler (manchmal auch als Elementtypwähler bezeichnet) ordnet Elemente dem entsprechenden Elementknotennamen zu, z

, und Tags. Typselektoren werden im Allgemeinen verwendet, um Änderungen am Stil einer Site mit einem breiten Strich vorzunehmen.

p ( /* "p" is the type selector */ margin: 0 0 1em 0; )

Gemeinsame Nutzung

Häufig werden Typwähler als Standardeinstellungen festgelegt, z. B. bei einem CSS-Reset, bei dem die Standardeinstellungen des Browsers überschrieben werden sollen. 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 Typauswahlelemente setzen die Anzeigeeigenschaft dieser Tags auf Block, sodass jedes Mal, wenn eines dieser Tags auf der gesamten Site verwendet wird, es als Block angezeigt wird, sofern es nicht durch einen spezifischeren Stil überschrieben wird.

Empfohlene Vorgehensweise

Es wird allgemein als schlechte Praxis angesehen, feine Detailänderungen nur mit einem Typwähler anzuwenden. Zum Beispiel würde das pauschale Anwenden einer "color: white" -Eigenschaft auf alle Tags auf keiner Site von Nutzen sein. Dies liegt daran, dass Tags generisch sind und auf verschiedenen Websites für verschiedene Zwecke verwendet werden.

Allerdings mit einem Typenwahl wie body ( )ein Standard - Einstellung font-size und line-heightist weit verbreitet. Dies ist teilweise auf die Tatsache zurückzuführen, dass auf einer bestimmten Seite nur ein Tag vorhanden sein kann , sodass weniger Möglichkeiten für Konflikte bestehen.

Typauswahlspezifikation und Leistung

Typauswahl befindet sich auf der untersten Ebene der Spezifitätskaskade (im Allgemeinen als 0, 0, 0, 1 geschrieben). Dies bedeutet, dass fast alles den Stil überschreibt, der nur über eine Typauswahl angewendet wird, und dass einer Klasse oder ID in eine Typauswahl hinzugefügt wird Ihr CSS bietet nur minimale zusätzliche Spezifität.

Typenselektoren rangieren auf der CSS-Effizienzskala ebenfalls niedriger als Klassen und IDs. Daher ist es technisch besser, eine Klasse oder eine ID anstelle der allgemeineren Typauswahl zu verwenden (obwohl der tatsächliche Geschwindigkeitsunterschied normalerweise vernachlässigbar ist).