From 4ab365b110f2f1f2b736326b7059244a32115089 Mon Sep 17 00:00:00 2001 From: Florian Merz Date: Thu, 11 Feb 2021 14:45:38 +0100 Subject: unslug de: move --- files/de/web/css/specificity/index.html | 197 ++++++++++++++++++++++++++++++++ 1 file changed, 197 insertions(+) create mode 100644 files/de/web/css/specificity/index.html (limited to 'files/de/web/css/specificity/index.html') diff --git a/files/de/web/css/specificity/index.html b/files/de/web/css/specificity/index.html new file mode 100644 index 0000000000..e8a0e22302 --- /dev/null +++ b/files/de/web/css/specificity/index.html @@ -0,0 +1,197 @@ +--- +title: Spezifität +slug: Web/CSS/Spezifität +tags: + - Beispiel + - CSS + - Guide + - Web +translation_of: Web/CSS/Specificity +--- +
{{cssref}}
+ +

Das Konzept

+ +

Spezifität ist das Mittel, mit dem ein Browser bestimmt, welche Eigenschaftswerte die relevantesten für ein Element sind und zugewiesen werden. Spezifität basiert ausschließlich auf den Matchingregeln, welche durch die verschiedenen Selektoren gebildet werden.

+ +

Berechnung

+ +

Die Spezifität wird durch die Verkettung der Anzahl jedes Selektortyps berechnet. Sie entspricht keiner Gewichtung, die dem passenden Ausdruck zugewiesen wird.

+ +

Im Falle einer Spezifitätsgleichheit wird die letzte im CSS gefundene Deklaration auf das Element angewandt.

+ +

{{ Note("Die Nähe von Elementen in einem Dokumentenbaum zueinander hat keine Auswirkung auf die Spezifität.") }}

+ +

Reihenfolge der Spezifität

+ +

Die folgende Selektorenliste ist nach aufsteigender Spezifität sortiert:

+ + + +

Die !important Ausnahme

+ +

Wenn eine !important Regel auf eine Stildeklaration angewendet wird, überschreibt diese Deklaration alle anderen Deklarationen des CSS, unabhängig davon, wo sie in der Deklarationsliste steht. Jedoch hat !important nichts mit Spezifität zu tun. Es wird davon abgeraten, !important zu verwenden, da es das Debuggen erschwert, weil die normale Kaskadierung der Stylesheets dadurch unterbrochen wird.

+ +

Einige allgemeine Regeln:

+ + + +

Anstatt !important zu verwenden kann folgendes getan werden:

+ +
    +
  1. Besseren Gebrauch der CSS Kaskadierungseigenschaften machen.
    2. +
  2. +

    Spezifischere Regeln verwenden. Eines oder mehrere Elemente vor dem Element anzugeben, das selektiert werden soll, ist spezifischer und erhält eine höhere Priorität:

    + + 
    <div id="test">
+  <span>Text</span>
+</div>
    + + 
    div#test span { color: green; }
+span { color: red; }
+div span { color: blue; }
    +
    3. +
+ +

Unabhängig von der Reihenfolge, in der der Text steht, wird der Text grün dargestellt, da die Regel spezifischer ist. (Des weiteren überschreibt die Regel für blau die Regel für rot unabhängig von deren Reihenfolge.)

+ +

!Important sollte in folgenden Fällen verwendet werden:

+ +

A) Erstes Szenario

+ +
    +
  1. Eine globale CSS Datei wird verwendet, die die visuellen Aspekte der Seite global setzt.
    2. +
  2. Es werden Inline Styles in Elementen verwendet, wovon grundsätzlich abgeraten wird.
    3. +
+ +

In diesem Fall sollten bestimmte Stile in der globalen CSS Datei als !important deklariert werden, was Inline Styles überschreibt.

+ +

B) Weiteres Szenario

+ +
#someElement p {
+  color: blue;
+}
+
+p.awesome {
+  color: red;
+}
+ +

Ohne !important hat die erste Regel eine höhere Spezifität und hat damit Vorrang vor der zweiten Regel. Somit werden alle awesome Absätze blau dargestellt.

+ +

Wie !important überschrieben werden kann

+ +

Eine Eigenschaft, die mit !important gekennzeichnet ist, kann durch eine weitere !important Eigenschaft überschrieben werden. Hierbei muss jedoch die zweite Eigenschaft entweder eine höhere Spezifität besitzen (indem im Selektor ein zusätzlicher Tag, eine ID oder Klasse angegeben wird) oder eine CSS Regel mit dem gleichen Selektor muss weiter unten als die existierende platziert werden.

+ +

Einige Beispiele mit höherer Spezifität:

+ +
table td    {height: 50px !important;}
+.myTable td {height: 50px !important;}
+#myTable td {height: 50px !important;}
+ +

Beispiel für gleichen Selektor nach dem existierenden:

+ +
td {height: 50px !important;}
+ +

Die :not Ausnahme

+ +

Die Negations-Pseudoklasse :not wird nicht als Pseudoklasse in der Spezifitätsberechnung berücksichtigt. Jedoch werden Selektoren innerhalb der Negations-Pseudoklasse als normale Selektoren behandelt.

+ +
+

Beispiel CSS:

+ +
div.outer p {
+  color:orange;
+}
+div:not(.outer) p {
+  color: lime;
+}
+
+ +

Angewendet auf folgendes HTML:

+ +
<div class="outer">
+  <p>Dies ist im äußeren div.</p>
+  <div class="inner">
+    <p>Dieser Text ist innerhalb des inneren divs.</p>
+  </div>
+</div>
+
+
+ +

Ergibt:

+ +

{{ EmbedLiveSample('Beispiel_not','600','100') }}

+ +

Formbasierte Spezifität

+ +

Spezifität basiert auf der Form eines Selektors. Im folgenden Fall zählt der Selektor als ein Attribut im Algorithmus zur Bestimmung der Spezifität, obwohl er eine ID selektiert.

+ +

CSS:

+ +
+
* #foo {
+  color: green;
+}
+*[id="foo"] {
+  color: purple;
+}
+
+ +

Angewendet auf folgendes HTML:

+ +
<p id="foo">I am a sample text.</p>
+
+
+ +

Ergibt:

+ +

{{ EmbedLiveSample('Beispiel_formbasierte_Spezifitaet','600','100') }}

+ +

Da das gleiche Element selektiert wird, der ID-Selektor jedoch eine höhere Spezifität aufweist.

+ +

Nichtbeachtung der Position innerhalb des Baumes

+ +
+

CSS:

+ +
body h1 {
+  color: green;
+}
+html h1 {
+  color: purple;
+}
+
+ +

Angewendet auf folgendes HTML:

+ +
<html>
+  <body>
+    <h1>Here is a title!</h1>
+  </body>
+</html>
+
+
+ +

Ergibt:

+ +

{{ EmbedLiveSample('Beispiel_Nichtbeachtung_Baumposition','600','100') }}

+ +

Siehe auch

+ + -- cgit v1.2.3-54-g00ecf