Come annullare una proprietà CSS?

Question

La pagina su cui sto lavorando ha molti file CSS collegati, un boostrap.css, il master.css e un file custom.css.

Sto tentando di rimuovere una proprietà, in quanto non voglio che ci sia una proprietà: hover sul link in un menu. Il file master CSS ha

#topSurround a:hover { 
    color: #ffffff; 
} 

Il file CSS bootstrap ha

.nav > li > a:hover { 
    text-decoration: none; 
    background-color: #eee; 
} 

Non voglio modificare questi file, in quanto sono file core con il modello che sto usando e potrebbe essere aggiornato, quindi sto usando un file CSS personalizzato. Normalmente, imposterei la proprietà su default per sovrascrivere qualsiasi utilizzo precedente della proprietà.

#topSurround a:hover { 
    color: none; (doesn't work, as this isn't the correct default) 
} 

Quindi, due domande: qual è il valore predefinito per la proprietà del colore (non sembra esserlo)? C'è un modo più semplice per farlo senza dover sovrascrivere i file principali?

Answer 1

È possibile utilizzare color: inherit per fare in modo che il colore utilizzi il valore dei relativi antenati. color è strano in quanto ha valori predefiniti diversi a seconda del contesto. Un collegamento, ad esempio, verrà in genere impostato su blu, mentre il testo verrà visualizzato come nero.

Se è necessario sostituire lo stile esistente, non utilizzare un selettore più specifico. Aumentare lo specificity significa che dovrai semplicemente utilizzare più selettori la prossima volta che desideri sovrascriverlo.

invece approfittare della cascata utilizzando un selettore con specificità identica e fare l'override accadere dopo lo stile originale:

/* older style in some library */ 
.foo .bar .baz { 
    color: blue; 
} 

...in an overriding CSS file... 

.foo .bar .baz { 
    color: green; 
} 

Answer 2

Il modo migliore è quello di fare una più specifica regola CSS, come ad esempio:

body #topSurround a:hover { 
    color: transparent; 
} 

La specificità è un concetto CSS importante, come descritto in questo articolo:

http://coding.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/

Answer 3

Ogni stile CSS ha un valore predefinito naturale. Non sempre è none.

Alcuni possono essere 0 (come in zero).

Alcuni possono essere auto.

A volte inherit è l'opzione migliore.

I colori possono essere impostati su transparent.

Se non si è sicuri di quale sia l'impostazione predefinita, provare a creare una pagina fittizia con un semplice elemento non programmato e utilizzare gli strumenti di sviluppo del browser per vedere a quali stili sono impostati gli stili.

Answer 4

io consiglierei di provare:

#topSurround a:hover { 
    color: inherit; 
} 

Per quanto riguarda come sovrascrivere quello Bootstrap è l'aggiunta, penso a quanto stavi facendo è meglio.

Answer 5

Per cancellare la proprietà è possibile utilizzare unset parola chiave.

Così, in te personalizzato file CSS si può fare qualcosa di simile seguenti: -

#topSurround a:hover { 
    color: unset; 
} 

Secondo la documentazione MDN Web: -

La parola chiave CSS unset azzera una proprietà al suo ereditata valore se eredita dal suo genitore, e al suo initial value se non. In altre parole, si comporta come la parola chiave inherit nel primo caso e come la parola chiave initial nel secondo caso. Può essere applicato a qualsiasi proprietà CSS, inclusa la stenografia CSS tutto.