ereditarietà CSS e overriding it

Sono nuovo di CSS. Ho creato un sito Drupal e sto giocando con il tema.ereditarietà CSS e overriding it

Ho alcune cose breadcrumb che vorrei temere. Se entro in Firebug e spegnere le proprietà CSS

background 
border-color 
border-style

nel seguente codice

.breadcrumbs .inner { 
    background: none repeat scroll 0 0 #EFEFEF; 
    border-color: #929292 #E2E2E2 #FFFFFF; 
    border-style: solid; 
    border-width: 1px; 
    color: #8E8E8E; 
}

ricevo il testo cercando esattamente come lo voglio.

Se io ora vado nel mio style.css che sta ereditando il codice e post

.breadcrumbs .inner { 
    border-width: 1px; 
    color: #8E8E8E; 
}

La formattazione Non voglio viene mantenuta. Se si specifica .breadcrumbs .inner in style.css, questo non lo imposta di nuovo e sovrascrive quello che è stato specificato più in alto nella cascata?

In caso contrario, come si interrompe l'ereditarietà senza modificare l'altro foglio di stile?

Grazie,

Andrew

Altre Informazioni

Ecco quello che ho in questo momento

enter image description here

Questo è ciò che voglio avere enter image description here

fonte

2011-01-27 Andrew

Utilizzare! Importante dopo ogni proprietà che si desidera sovrascrivere. come 'display: inline! important;' – Cronco

@BoltClock So che è una cattiva pratica.In alternativa, supponendo che il reset delle proprietà andrebbe bene, suppongo che, se è esattamente lo stesso selettore e definito dopo il primo, usando per esempio 'background: transparent;' dovrebbe sovrascrivere la prima dichiarazione. – Cronco

Stai ignorando CSS non sostituisce i 3 stili che desideri modificare, quindi quelli originali vengono mantenuti. Quello che probabilmente vuole fare è avere il vostro style.css impostare qualcosa di simile:

.breadcrumbs .inner { 
    background: none; 
    border-color: transparent; 
    border-style: none; 
}

fonte

2011-01-27 23:02:06 nybbler

Grazie per la risposta, l'ho provato, ho aggiornato la cache ecc. E non c'era nessun cambiamento che altro dovrei provare? – Andrew

@Andrew: in base agli screenshot che hai aggiunto, style.css non conteneva alcuna definizione per '.breadcrumbs .inner' Quando dici di aver aggiornato la cache, hai svuotato tutti i tuoi file temporanei Internet e ricaricato la pagina. Prova anche + F5, a volte solo F5 non lo fa. A parte questo, vorrei ricontrollare per assicurarmi di avere i tuoi collegamenti CSS nell'ordine che desideri (es: style.css dopo gray.css) – nybbler

Ciao, Il ctrl + F5 ha funzionato. Grazie – Andrew

Se si specificano gli stili CSS per stesse classi due volte lo stile risultante è un'unione degli attributi definiti in entrambe le classi. Per rimuovere gli stili precedenti devi ridefinire gli attributi.

fonte

2011-01-27 23:02:16 Chandu

Grazie per la risposta potresti chiarire un po 'di più cosa intendi? Non so se sono stato fortunato ma quando ho seguito un metodo simile, come ho indicato nel mio post originale, le modifiche applicate. – Andrew

Se ad esempio si dispone di questi css collegata al documento html

<link rel="stylesheet" type="text/css" href="css/default.css"> 
<link rel="stylesheet" type="text/css" href="css/posts.css">

se avete la stessa classe dici .color definito nei file sia default.css e posts.css, si potrebbe immaginare che quel ultimo file css sarà utilizzato, ma può essere ignorato se si scrive in questo modo:!

// default.css 
.color { 
    color: blue !important; 
} 

// posts.css 
.color { 
    color: green; 
} 
// In this example the colour would be blue.

Utilizzando importante forze stile ereditato lo stile ereditato da utilizzare, se si desidera ignorare lo stile ereditato allora si può aggiungi semplicemente! important to post.css

// default.css 
.color { 
    color: blue !important; 
} 

// posts.css 
.color { 
    color: green !important; 
} 
// In this example the colour would be green.

Ora entrambi sono considerati importanti e l'ultimo verrà utilizzato.

fonte

2014-12-29 19:16:33

ereditarietà CSS e overriding it

risposta

Problemi correlati