blob: f79a337e9c9822cf6592e64a8ed958278734b8b1 (
plain)
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
|
---
title: Especificidade
slug: Web/CSS/Specificity
translation_of: Web/CSS/Specificity
---
<h2 id="O_Conceito">O Conceito</h2>
<p>A especificação é a maneira de como os navegadores definem quais valores de propriedades são os mais relevantes para o elemento a ser utilizado. A especificação é baseada apenas nas regras impostas na composição de diferentes tipos de <a href="/en/CSS/CSS_Reference#Selectors" title="en/CSS/CSS_Reference#Selectors">seletores</a>.</p>
<h2 id="Como_isso_é_calculado">Como isso é calculado?</h2>
<p>A espeficicação é calculada na concatenação da contagem de cada tipo de seletor. Não é um peso aplicado na expressão correspondente.</p>
<p>No caso de igualdade de especificação, a última declaração encontrada no CSS é aplicada ao elemento.</p>
<div class="note">Note: O fato de<span id="result_box" lang="pt"><span class="hps"> elementos estarem próximos na</span> <span class="hps">árvore do documento</span> <span class="hps">não tem efeito sobre</span> <span class="hps">a especificação</span><span>.</span></span></div>
<h3 id="Ordem_crescente_de_especificação">Ordem crescente de especificação</h3>
<p>A seguinte lista de seletores está incluida na especificação:</p>
<ul>
<li>Seletores Universais</li>
<li>Tipo de Seletores</li>
<li>Classes seletoras</li>
<li>Atributos Seletores</li>
<li>Pseudo-classes</li>
<li>Seletores ID</li>
<li>Estilo Inline</li>
</ul>
<h3 id="A_exceção_!important">A <span class="short_text" id="result_box" lang="pt"><span class="hps">exceção</span></span> <code>!important</code></h3>
<p>Quando a regra <code>!important</code> é utilizada na declaração do estilo substitui qualquer outra declaração feita no CSS, onde quer que esteja na lista de declaração. Contudo, <code>!important</code> não tem nada a ver com especificação. </p>
<h3 id="A_exceção_not">A exceção <code>:not</code></h3>
<p>A pseudo-classe de negação <code>:not</code> não é considerada uma pseudo-classe no cálculo de especificação. Contudo, seletores colocados na pseudo-class de negação são entendidos como seletores normais.</p>
<p>Aqui está um trecho de CSS:</p>
<pre class="brush: css">div.outer p {
color:orange;
}
div:not(.outer) p {
color: lime;
}
</pre>
<p>Usado com o seguindo código HTML:</p>
<pre class="brush: html"><div class="outer">
<p>Esta é a div outer.</p>
<div class="inner">
<p>Este texto está na div inner.</p>
</div>
</div>
</pre>
<p>Irá aparecer na tela assim:</p>
<p><span style="color: #ffa500;">Esta é a div outer.</span></p>
<p><span style="color: #00ff00;">Este texto está na div inner.</span></p>
<h3 id="Especificação_Form-based">Especificação Form-based</h3>
<p>A especificação é baseada na forma de um seletor. No seguinte caso, o seletor contém os atributos <span id="result_box" lang="pt"><span class="hps">no</span> <span class="hps">algoritmo de determinação de</span> especificação<span>, embora</span> <span class="hps">ele selecione</span> <span class="hps">um ID</span></span>.</p>
<p>A seguir veja as declarações de estilo:</p>
<pre class="brush: css">* #foo {
color: green;
}
*[id="foo"] {
background: purple;
}
</pre>
<p>Usado com esta marcação:</p>
<pre class="brush: html"><p id="foo">Eu sou um simples texto.</p>
</pre>
<p>Vai acabar parecendo algo como:</p>
<p><span style="color: #008000;">Eu sou um simples texto.</span></p>
<p><span id="result_box" lang="pt"><span class="hps">Porque coincide com o</span> <span class="hps">mesmo elemento</span><span>, mas</span> <span class="hps">o seletor de</span> <span class="hps">ID</span> <span class="hps">tem uma especificação</span> <span class="hps">superior.</span></span></p>
<h3 id="Estrutura_aproximada">Estrutura aproximada</h3>
<p>A seguir a declaração do estilo:</p>
<pre class="brush: css">body h1 {
color: green;
}
html h1 {
color: purple;
}
</pre>
<p>Com o HTML seguinte::</p>
<pre class="brush: html"><html>
<body>
<h1>Aqui está o título!</h1>
</body>
</html>
</pre>
<p>Vamos ter algo como:</p>
<p><span style="color: #800080;">Aqui está o título!</span></p>
<h2 id="Veja_Também">Veja Também</h2>
<ul>
<li>Espcificação de Seletores CSS - <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>
|
