Qual è la specificità del selettore degli attributi?

Mi chiedo quale sia la specificità del selettore di attributi. Per esempio:Qual è la specificità del selettore degli attributi?

id = 100 punti
class = 10 punti
Html Tag = 1 punto

Esempio:

/* this specificity value is 100 + 10 + 1 = 111 */ 
#hello .class h2 { }

Con questo HTML:

<div class="selectform"> 
<input type="text" value="inter text"> 
<input type="text" value="inter text" class="inputag"> 
</div>

Quale di questi 2 selettori è più specifico?

.selectform input[type="text"] { } 
.selectform .inputbg { }

Controllare demohttp://tinkerbin.com/IaZW8jbI

fonte

2012-07-10 Rohit Azad

La specificità non viene conteggiata in "punti" nel modo in cui si pensa: http://stackoverflow.com/questions/2809024/points-in-css-specificity – BoltClock

controllare la demo http://tinkerbin.com/ IaZW8jbI –

ti piacerebbe leggere l'inizio di [questo articolo] (http://coding.smashingmagazine.com/2009/08/17/taming-advanced-css-selectors/) distruggendo la rivista che spiega come funziona la specificità – stephenmurdoch

selettori di attributo sono ugualmente specifiche di selettori di classe.

Nell'esempio, il primo selettore è più specifico perché è presente un selettore di tipo aggiuntivo input che lo fa battere il secondo selettore.

La specificità di ciascun selettore è calculated come segue:

/* 1 class, 1 attribute, 1 type -> specificity = 0-2-1 */ 
.selectform input[type="text"] { } 

/* 2 classes     -> specificity = 0-2-0 */ 
.selectform .inputbg { }

fonte

2012-07-10 05:13:25 BoltClock

Interessante , poiché '#foo {}' ha una specificità di 1-0-0 mentre '[id =" foo "] {}' seleziona lo stesso elemento ma ha una * molto * bassa specificità di 1-0. – chharvey

@chharvey: corretto - questo perché il CSS stesso non ha alcuna mappatura da selettori di ID/classe a un particolare attributo, quindi qualsiasi selettore di attributo avrà la stessa specificità indipendentemente dal nome dell'attributo. Questa mappatura viene eseguita dal browser in base alla semantica del documento, non alla semantica CSS. Succede solo che attributo e selettori di classe condividono la stessa specificità (molto probabilmente per mantenere le cose semplici). – BoltClock

In generale, tutti i tipi di selettori sono uguali; ciò che conta è il numero di selettori nell'espressione. Quindi ID = 1, classe = 1 e tag HTML = 1.

Nel caso in cui due selettori abbiano la stessa specificità, quello che si trova più in basso nel file CSS "vince". Quindi assicurati di ordinare i tuoi riferimenti CSS dal generale allo specifico; le librerie come jquery-ui.css vanno prima, mentre i file CSS vanno dopo quelle.

fonte

2012-07-10 05:23:06

Giusto per aggiungere: questi sono per lo più noti come "selettori semplici". In un selettore, solo i selettori semplici e gli pseudo-elementi vengono considerati per specificità, non come combinatori. In un gruppo separato da virgole, la specificità viene calcolata separatamente per ciascuna parte del gruppo di selezione. – BoltClock

Qual è la specificità del selettore degli attributi?

risposta

Problemi correlati