unslug de: move

1 files changed, 197 insertions, 0 deletions

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
+---
+<div>{{cssref}}</div>
+
+<h2 id="Das_Konzept">Das Konzept</h2>
+
+<p>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 <a href="/de/docs/Web/CSS/CSS_Referenz#Selektoren">Selektoren</a> gebildet werden.</p>
+
+<h2 id="Berechnung">Berechnung</h2>
+
+<p>Die Spezifität wird durch die Verkettung der Anzahl jedes Selektortyps berechnet. Sie entspricht <strong>keiner</strong> Gewichtung, die dem passenden Ausdruck zugewiesen wird.</p>
+
+<p>Im Falle einer Spezifitätsgleichheit wird die letzte im CSS gefundene Deklaration auf das Element angewandt.</p>
+
+<p>{{ Note("Die Nähe von Elementen in einem Dokumentenbaum zueinander hat keine Auswirkung auf die Spezifität.") }}</p>
+
+<h3 id="Reihenfolge_der_Spezifität">Reihenfolge der Spezifität</h3>
+
+<p>Die folgende Selektorenliste ist nach aufsteigender Spezifität sortiert:</p>
+
+<ul>
+ <li>Universelle Selektoren</li>
+ <li>Typselektoren</li>
+ <li>Klassenselektoren</li>
+ <li>Attributselektoren</li>
+ <li>Pseudoklassen</li>
+ <li>ID-Selektoren</li>
+ <li>Inlinestile</li>
+</ul>
+
+<h3 id="Die_!important_Ausnahme">Die <code>!important</code> Ausnahme</h3>
+
+<p>Wenn eine <code>!important</code> 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 <code>!important</code> nichts mit Spezifität zu tun. Es wird davon <strong>abgeraten</strong>, <code>!important </code>zu verwenden, da es das Debuggen erschwert, weil die normale <em>Kaskadierung</em> der Stylesheets dadurch unterbrochen wird.</p>
+
+<p><strong>Einige allgemeine Regeln:</strong></p>
+
+<ul>
+ <li><strong>Niemals</strong> <code>!important</code> in CSS verwenden, das auf der gesamten Seite Verwendung findet.</li>
+ <li><code>!important</code> <strong>nur</strong> in Seiten spezifischem CSS verwenden, das seitenweites oder fremdes CSS (wie beispielsweise von ExtJS oder YUI) überschreibt.</li>
+ <li><strong>Niemals</strong> !important verwenden, wenn ein Plugin/Mashup geschrieben wird.</li>
+ <li><strong>Immer</strong> nach einem Weg suchen, Spezifität zu verwenden, bevor <code>!important</code> in Erwägung gezogen wird.</li>
+</ul>
+
+<p><strong>Anstatt <code>!important</code> zu verwenden kann folgendes getan werden:</strong></p>
+
+<ol>
+ <li>Besseren Gebrauch der CSS Kaskadierungseigenschaften machen.</li>
+ <li>
+  <p>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:</p>
+
+  <pre class="lang-html prettyprint prettyprinted"><code><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">id</span><span class="pun">=</span><span class="atv">"test"</span><span class="tag">&gt;</span><span class="pln">
+  </span><span class="tag">&lt;span&gt;</span><span class="pln">Text</span><span class="tag">&lt;/span&gt;</span><span class="pln">
+</span><span class="tag">&lt;/div&gt;</span></code></pre>
+
+  <pre class="lang-css prettyprint prettyprinted"><code><span class="pln">div</span><span class="pun">#</span><span class="pln">test span </span><span class="pun">{</span><span class="pln"> </span><span class="kwd">color</span><span class="pun">:</span><span class="pln"> green; </span><span class="pun">}</span><span class="pln">
+span </span><span class="pun">{</span><span class="pln"> </span><span class="kwd">color</span><span class="pun">:</span><span class="pln"> red; </span><span class="pun">}</span><span class="pln">
+div span </span><span class="pun">{</span><span class="pln"> </span><span class="kwd">color</span><span class="pun">:</span><span class="pln"> blue; </span><span class="pun">}</span></code></pre>
+ </li>
+</ol>
+
+<p>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.)</p>
+
+<p><strong>!Important sollte in folgenden Fällen verwendet werden:</strong></p>
+
+<p>A) Erstes Szenario</p>
+
+<ol>
+ <li>Eine globale CSS Datei wird verwendet, die die visuellen Aspekte der Seite global setzt.</li>
+ <li>Es werden Inline Styles in Elementen verwendet, wovon grundsätzlich abgeraten wird.</li>
+</ol>
+
+<p>In diesem Fall sollten bestimmte Stile in der globalen CSS Datei als !important deklariert werden, was Inline Styles überschreibt.</p>
+
+<p>B) Weiteres Szenario</p>
+
+<pre class="default prettyprint prettyprinted"><code><span class="com">#someElement p {</span><span class="pln">
+  color</span><span class="pun">:</span><span class="pln"> blue</span><span class="pun">;</span><span class="pln">
+</span><span class="pun">}</span><span class="pln">
+
+p</span><span class="pun">.</span><span class="pln">awesome </span><span class="pun">{</span><span class="pln">
+  color</span><span class="pun">:</span><span class="pln"> red</span><span class="pun">;</span><span class="pln">
+</span><span class="pun">}</span></code></pre>
+
+<p>Ohne <code>!important</code> hat die erste Regel eine höhere Spezifität und hat damit Vorrang vor der zweiten Regel. Somit werden alle <code>awesome</code> Absätze blau dargestellt.</p>
+
+<p><strong>Wie <code>!important</code> überschrieben werden kann</strong></p>
+
+<p>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.</p>
+
+<p>Einige Beispiele mit höherer Spezifität:</p>
+
+<pre class="default prettyprint prettyprinted"><code><span class="pln">table td    </span><span class="pun">{</span><span class="pln">height</span><span class="pun">:</span><span class="pln"> </span><span class="lit">50px</span><span class="pln"> </span><span class="pun">!</span><span class="pln">important</span><span class="pun">;}</span><span class="pln">
+</span><span class="pun">.</span><span class="pln">myTable td </span><span class="pun">{</span><span class="pln">height</span><span class="pun">:</span><span class="pln"> </span><span class="lit">50px</span><span class="pln"> </span><span class="pun">!</span><span class="pln">important</span><span class="pun">;}</span><span class="pln">
+</span><span class="com">#myTable td {height: 50px !important;}</span></code></pre>
+
+<p>Beispiel für gleichen Selektor nach dem existierenden:</p>
+
+<pre class="default prettyprint prettyprinted"><code><span class="pln">td </span><span class="pun">{</span><span class="pln">height</span><span class="pun">:</span><span class="pln"> </span><span class="lit">50px</span><span class="pln"> </span><span class="pun">!</span><span class="pln">important</span><span class="pun">;}</span></code></pre>
+
+<h3 id="Die_not_Ausnahme">Die <code>:not</code> Ausnahme</h3>
+
+<p>Die Negations-Pseudoklasse <code>:not</code> wird nicht als Pseudoklasse in der Spezifitätsberechnung berücksichtigt. Jedoch werden Selektoren innerhalb der Negations-Pseudoklasse als normale Selektoren behandelt.</p>
+
+<div id="Beispiel_not">
+<p>Beispiel CSS:</p>
+
+<pre class="brush: css">div.outer p {
+  color:orange;
+}
+div:not(.outer) p {
+  color: lime;
+}
+</pre>
+
+<p>Angewendet auf folgendes HTML:</p>
+
+<pre class="brush: html">&lt;div class="outer"&gt;
+  &lt;p&gt;Dies ist im äußeren div.&lt;/p&gt;
+  &lt;div class="inner"&gt;
+    &lt;p&gt;Dieser Text ist innerhalb des inneren divs.&lt;/p&gt;
+  &lt;/div&gt;
+&lt;/div&gt;
+</pre>
+</div>
+
+<p>Ergibt:</p>
+
+<p>{{ EmbedLiveSample('Beispiel_not','600','100') }}</p>
+
+<h3 id="Formbasierte_Spezifität">Formbasierte Spezifität</h3>
+
+<p>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.</p>
+
+<p>CSS:</p>
+
+<div id="Beispiel_formbasierte_Spezifitaet">
+<pre class="brush: css">* #foo {
+  color: green;
+}
+*[id="foo"] {
+  color: purple;
+}
+</pre>
+
+<p>Angewendet auf folgendes HTML:</p>
+
+<pre class="brush: html">&lt;p id="foo"&gt;I am a sample text.&lt;/p&gt;
+</pre>
+</div>
+
+<p>Ergibt:</p>
+
+<p>{{ EmbedLiveSample('Beispiel_formbasierte_Spezifitaet','600','100') }}</p>
+
+<p>Da das gleiche Element selektiert wird, der ID-Selektor jedoch eine höhere Spezifität aufweist.</p>
+
+<h3 id="Nichtbeachtung_der_Position_innerhalb_des_Baumes">Nichtbeachtung der Position innerhalb des Baumes</h3>
+
+<div id="Beispiel_Nichtbeachtung_Baumposition">
+<p>CSS:</p>
+
+<pre class="brush: css">body h1 {
+  color: green;
+}
+html h1 {
+  color: purple;
+}
+</pre>
+
+<p>Angewendet auf folgendes HTML:</p>
+
+<pre class="brush: html">&lt;html&gt;
+  &lt;body&gt;
+    &lt;h1&gt;Here is a title!&lt;/h1&gt;
+  &lt;/body&gt;
+&lt;/html&gt;
+</pre>
+</div>
+
+<p>Ergibt:</p>
+
+<p>{{ EmbedLiveSample('Beispiel_Nichtbeachtung_Baumposition','600','100') }}</p>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>CSS3 Selektoren Spezifität - <a class="external" href="http://www.w3.org/TR/selectors/#specificity" rel="freelink">http://www.w3.org/TR/selectors/#specificity</a></li>
+ <li>{{ CSS_key_concepts() }}</li>
+</ul>