Ignora stili senza! Importante

Question

Come è possibile sovrascrivere gli stili specificati in un altro foglio di stile?

Non voglio usare il tag! Important per sovrascriverli. Preferirei piuttosto specificare un nuovo foglio di stile, inserire gli stili qui. Questo potrebbe essere ottenuto cambiando l'ordine di caricamento dei fogli di stile?

Answer 1

Dipende. CSS sta per Cascading Style Sheets, e c'è un ordine specifico in cui gli stili vengono applicati, sovrascrivendo gli stili precedenti. Senza entrare troppo nel dettaglio:

• Se le regole hanno la stessa specificità, basta caricare il foglio di stile in secondo luogo e tutto funzionerà correttamente.
• Se le tue regole hanno una specificità superiore, l'ordine non avrà importanza.
• Se le regole hanno una specificità inferiore, è necessario modificarle per farle corrispondere.

Quindi, qual è la specificità? Fondamentalmente, è la somma di ciascun selettore in una regola. Quindi questo:

a { 
    background-color: black; 
    color: white; 
} 

ha meno specificità di questo:

body a { 
    color: orange; 
} 

. I selettori di ID hanno una specificità più elevata rispetto ai selettori di classe, che hanno la stessa specificità dei selettori di pseudo-classe, che hanno una specificità superiore rispetto ai selettori di tag. Quindi, se tutti i tuoi contenuti è contenuto in un <div> con una id di content, si sarebbe in grado di ignorare uno stile che assomiglia a questo:

body a { 
    border: 0; 
} 

Con:

#content a { 
    border: 1px solid black; 
} 

Answer 2

Il foglio di stile di boostrap deve essere caricato prima, il foglio di stile secondo, in questo modo verranno sovrascritte le sovrascritture.

questo è chiamato "a cascata", dalla documentazione:

cascata

Questa è la capacità fornita da alcuni linguaggi per fogli di stile come CSS per consentire le informazioni di stile provenienti da diverse fonti per essere miscelati insieme. Queste potrebbero essere, ad esempio, linee guida per lo stile aziendale, stili comuni a un gruppo di documenti e stili specifici per un singolo documento . Memorizzando questi separatamente, i fogli di stile possono essere riutilizzati, semplificando la creazione e rendendo più efficace l'uso della caching della rete . La cascata definisce una sequenza ordinata di fogli di stile in cui le regole nei fogli successivi hanno maggiore precedenza di quelle precedenti. Non tutti i linguaggi di stile supportano il collegamento in cascata.

Answer 3

guardare http://www.stuffandnonsense.co.uk/archives/css_specificity_wars.html.

<p class="example"> 
    This is a <strong>test</strong>. 
</p> 

strong { color: red; } 
p strong { color: green; } 
p.example strong { color: blue; } 

Il testo sarà blu. L'ordine delle regole non ha importanza.

Answer 4

Se è possibile aumentare lo specificity of styles, è possibile farlo senza lo !important.

Ad esempio:

HTML

<div id="selector"> 
    <a>Hello</a> 
    <a class="specific">Hi</a> 
</div> 

CSS

div a {} 

verranno ignorati, se si dà una specifica classe all'interno #selector

.specific { } 

Qui i s un demo che spiega il mio punto. Fondamentalmente, l'idea è di definire gli stili il più vicino possibile.