Css non sovrascrive i valori ereditati

Ho un Html che contiene qualcosa di simile: (div multipli in div A).Css non sovrascrive i valori ereditati

<div class="a"> 
    <div class="b"></div> 
</div>

mio css sembra che:

.a div { 
    border: solid; 
    border-width: thin; 
} 

.b { 
    border: none; 
    border-width: 0px; 
    border-collapse: collapse; 
}

Per qualche motivo i valori di b non viene sostituita. tuttavia, se scrivo piuttosto che "a .div" non otterrò il comportamento previsto per le altre div all'interno di a.

L'unico modo per farlo funzionare è "importante!" (es. "border: none! important";) ma sembra meno elegante.

piacerebbe tutte le idee su ciò che sta succedendo lì ..

Ehud.

fonte

2012-01-12 EhudFisher

.a div ha una specificità superiore a .b.
Se si desidera che il css per .b sovrascriva quello .a, conferisce ancora una specificità più elevata, ad esempio .a div.b.

(Oppure è possibile utilizzare !important, sì, ma non consigliato qui.)

fonte

2012-01-12 09:12:27

Questo è alquanto intuitivo, almeno per me, ma funziona come un incantesimo (a proposito ho appena usato ".b div" e anche quello ha funzionato). – EhudFisher

Questo è strano, '.b div' non dovrebbe funzionare, dal momento che non ci sono div all'interno del tuo .b, almeno non nel tuo esempio. Ad ogni modo, la specificità è un concetto molto importante all'interno dei CSS, ti consiglierei di leggerlo. –

I selettori sono errati.

Invece di

a. div {

Scrivi

div.a {

(selezionare qualsiasi div con una classe di "a")

Invece di

b {

(che in realtà sarà prova a stile tutto b elementi)

Usa

.b {

(che dice selezionare tutto ciò che è definito dalla classe di "b")

EDIT (in risposta alla risposta)

Per selezionare tutti i div che si trovano all'interno di un div con la classe di "a", utilizzare il seguente selettore: -

div.a div

fonte

2012-01-12 08:50:04

miei selettori (nel codice) erano soddisfacenti, ma quello che ho messo nella domanda era ovviamente sbagliato. I miei selettori sono ".b" e ".a div". Spiacente, modifico il post originale. La soluzione, tuttavia, non funziona per me. Quello che sto cercando di selezionare non sono tutti i div con una classe a, ma tutti i div in un elemento la cui classe è a. – EhudFisher

Modificato con un nuovo selettore per voi, signore. –

Specificità punteggio viene calcolato dal compilatori CSS, il punteggio più alto tra dichiarazione arriva a modificare il contenuto.

punti vengono generalmente calcolato da questo ordine:

inline id-element class-element no.-of-elements 
    $   $    $    $

($) -> 1 se il rispettivo tipo di specificità esiste nel codice
($) -> 0 se il rispettivo tipo di specificità doesn 't esiste nel codice

Quindi, ecco
per .a div punteggio sarà 0012
per .b punteggio sarà 0011
Chiaramente primo vince così si arriva a modificare i contenuti anche se .b cerca di ignorare .a div

(OR)

è possibile utilizzare !important nella dichiarazione di finalizzare tale dichiarazione

fonte

2017-04-05 20:46:05

Css non sovrascrive i valori ereditati

risposta

Problemi correlati