La regola CSS più specifica non funziona

Nel mio codice seguente, ho definito una regola più specifica per h1 come #inner h1 e meno regole specifiche come #container h1 è anche definita. Ma se #container h1 è messo dopo #inner h1 allora ha effetto e #inner h1 viene ignorato mentre non dovrebbe essere perché è più specifico.La regola CSS più specifica non funziona

Per favore aiutami a capire il problema.

CSS:

#inner h1 { font-size:25px; } 
#container h1 { font-size:15px; }

HTML:

<div id="container"> 
    <div id="inner"> 
    <h1>Hello World!</h1> 
    </div> 
</div>

fonte

2012-01-01 Shawn Taylor

No, '#inner h1' non è più specifico di' #container h1'. Entrambi hanno una specificità di 101 (credo, http://www.htmldog.com/guides/cssadvanced/specificity/). Solo perché un elemento è INSIDE, un altro elemento non rende quello interno più specifico. – Charlie

@Charlie: Si noti che non è letteralmente un centinaio - 11 selettori di classe, per esempio, non sovrascriveranno un singolo selettore ID. È più simile a uno zero zero. – BoltClock

Grazie per il chiarimento – Charlie

Potrebbe essere che la tua idea di specificità sia un po 'spenta. La specificità deve essere un'idea libera dal contesto: poiché i CSS possono essere caricati indipendentemente dall'HTML, non è necessario un documento HTML per indovinare quale regola è più "specifica". Considerate questo altro valido esempio:

<div id="inner"> 
    <div id="container"> 
    <h1>Hello World!</h1> 
    </div> 
</div>

Con questo frammento di codice, si dovrebbe andare contro la tua ipotesi iniziale che inner dovrebbe essere più specifico. Ciò significa che la tua interpretazione richiede il contesto (che il CSS non ha).

Il punto è che entrambe le regole sono viste con uguale specificità (h1 discendenti di un elemento identificato da un id) e il selettore non dà una priorità maggiore ai discendenti più vicini.

Nel caso si applichino due regole di uguale specificità, il vincitore è l'ultimo dichiarato nel CSS.

fonte

2012-01-01 06:41:07 zneak

Una buona spiegazione – grc

Un'altra cosa: i combinatori non contribuiscono affatto alla specificità, quindi scambiare lo spazio per un '>' non influenzerà quale regola ha la precedenza, perché entrambi i combinatori non hanno specificità. Vedi [questa domanda] (http://stackoverflow.com/questions/8096829/why-do-foo-bar-and-foo-bar-have-the-same-specificity-in-css) – BoltClock

-2

questo non è un problema a tutti :) CSS analizza classi uno dopo l'altro e l'ultima regola ignora precedente, ovviamente se il precedente è non più specifiche o non include! affermazioni importanti in esso, puoi mettere la dimensione del font: 25px! important; nella prima in modo che sostituisca l'ultima regola, altrimenti basta cambiare i posti delle classi

fonte

2012-01-01 06:35:43

Classi? Quali lezioni? – grc

Non c'è #inner h1 più specifico? –

@grc, classi css lol –

Questi due hanno la stessa specificità e, come si nota, l'ordine che compaiono nel foglio di stile è il fattore determinante per il quale vengono applicate le regole di stile .

Esistono vari modi per strutturare le regole per ottenere maggiore specificità, ma in generale non starei al modificatore !important.

Per ulteriori informazioni, vedere 6.4.3 Calculating a selector's specificity nella specifica CSS del W3.

fonte

2012-01-01 06:38:56 steveax

Non c'è #inner h1 più specifico? –

C'è anche un articolo utile sulla specificità del selettore (c'era una domanda simile a ieri), http://www.htmldog.com/guides/cssadvanced/specificity/ – Charlie

@ShawnTaylor no, questi due hanno la stessa specificità. – steveax

La regola CSS più specifica non funziona

risposta

Problemi correlati