Warum hat ein Attributselektor eine höhere Spezifität als eine Klasse?

Question

Warum überschreibt der input[type=number] Selektor im folgenden Beispiel den Klassenwähler .num? Sollten beide nicht eine Spezifität von 1 haben?

Meine Erwartung war, dass, was auch immer später erklärt wurde, das erstere außer Kraft gesetzt hätte.

HTML:

<input type="number" class="num"> 

CSS:

input { 
    width: 100px; 
} 

input[type=number] { 
    border: 2px solid #c0ffee; 
} 

.num { 
    border: 2px solid #c55; 
} 

https://jsfiddle.net/m3ftm4k3

Answer 1

Attributselektoren weisen dieselbe Spezifitätsstufe wie CSS-Klassenselektoren auf. In Ihrem Beispiel haben Sie input[type=number] und .num.

• input[type=number] eine Spezifität von 0 0 1 1 hat, hat er zwei Selektoren darin, ein Element input und Attribut[type=number].
• .num, hat eine Spezifität von 0 0 1 0 und hat nur einen Selektor, Klasse.

Da input[type=number] eine höhere Spezifität als .num es Stil ist immer unabhängig von Platzierung gewinnt aus. Wenn input[type=number] in [type=number] geändert wurde, dann würde das Placement eine Rolle spielen, da sie beide eine Spezifität von 0 0 1 0 teilen würden und die später gewinnen würde.

input { 
 
    padding: 0.25em 0.5em; 
 
} 
 

 
/* Specificity - 0, 0, 1, 1 */ 
 
input[type="number"] { 
 
    border-style: dotted; 
 
} 
 

 
/* Specificity - 0, 0, 1, 0 */ 
 
[type="number"] { 
 
    border: 1px dashed indianred; 
 
} 
 

 
/* Specificity - 0, 0, 1, 0 */ 
 
.num { 
 
    border-color: rebeccapurple; 
 
} 
 

 
/* Specificity - 0, 0, 1, 0 */ 
 
[type="number"] { 
 
    border-style: solid; 
 
    border-width: 2px; 
 
}

<input type="number" class="num" name="number" value="0">

* Anmerkung: Ich habe nur den gleichen CSS-Selektor zweimal zu Demonstrationszwecken. Beachten Sie, welche border-style gewinnt. Obwohl versucht wurde, dashed und solid nach dotted anzuwenden, wurde beides aufgrund der Spezifität nicht angewendet. Die Kaskade, welche Regel (en) nacheinander kamen, wird angewendet, wenn Spezifitätswerte identisch sind.

Answer 2

Warum ein Attributselektor höhere Spezifität als eine Klasse?

Sie nicht. Attribut- und Klassenselektoren haben beide eine Spezifität von 0,0,1,0.

Warum haben die input[type=number] Wähler im Beispiel unten überschreiben die .num Klassenauswahl? Sollten beide nicht eine Spezifität von 1 haben?

A Typselektor (input) + ein Attribut Selektor ([type=number]) eine Spezifität von 0,0,1,1.