1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
|
---
title: Spezifität
slug: Web/CSS/Specificity
tags:
- Beispiel
- CSS
- Guide
- Web
translation_of: Web/CSS/Specificity
original_slug: Web/CSS/Spezifität
---
<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"><div</span><span class="pln"> </span><span class="atn">id</span><span class="pun">=</span><span class="atv">"test"</span><span class="tag">></span><span class="pln">
</span><span class="tag"><span></span><span class="pln">Text</span><span class="tag"></span></span><span class="pln">
</span><span class="tag"></div></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"><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>
</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"><p id="foo">I am a sample text.</p>
</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"><html>
<body>
<h1>Here is a title!</h1>
</body>
</html>
</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>
|
