I miei CSS sono sovrascritti da Bootstrap CSS

Question

Voglio aggiungere GWT-Bootstrap al mio progetto già avviato. Sono riuscito a usarlo, ma il CSS Bootstrap ha la precedenza su ogni altro CSS. Il risultato è che tutti i miei precedenti elementi dell'interfaccia utente sono confusi.

Il margine, la dimensione del testo e molti elementi non si adattano più. Non riesco a utilizzare Bootstrap perché tutto il resto del progetto è inutilizzabile. Mi piacerebbe fare un cambio progressivo di Bootstrap e mantenere le vecchie cose come sono.

Vorrei avere la mia CSSS in questo ordine di priorità:

• MyApp
• GWT
• Bootstrap

Ho cercato di ordinare loro nel mio * .gwt.xml senza successo:

<stylesheet src="css/gwt-bootstrap.css" /> 
<stylesheet src="css/bootstrap.min.css" /> 
<stylesheet src="gwt/clean/clean.css" /> 
<stylesheet src="MyApp.css" /> 

Cosa posso fare?

Answer 1

La priorità di utilizzo di stili è guidato da più algoritmi complicati di un semplice ordine di inclusione in HTML. Lo stile CSS è scelto con la più specifica regola di selezione, dove le regole in linea sono considerati più specifica poi esternamente collegata, quindi la selezione per ID, quindi la classe e la selezione finale con il nome di tag. Ad esempio, il punto <p id="xyz" class="xyz"> sarà rosso indipendentemente dall'ordine di regole:

.xyz { 
    color: blue; 
} 
#xyz { 
    color: red; 
} 

Se ci sono due regole con lo stesso tipo di selezione, le materie numerici. Quindi, la selezione .xyz .abc è "più forte", quindi .qwerty.

Se due regole hanno selezione equivalenti in termini di numeri in ciascuna categoria, quindi, nell'ordine fine viene preso in considerazione ...

È anche possibile forzare un ordine diverso con la direttiva !important.

Read more su di esso con parole chiave "specificità CSS".

Answer 2

Il modo in cui gli stili prevalgono è l'ultimo caricato.

Quindi, se vi aspettate gli stili di GWT-Bootstrap per ignorare Bootstrap CSS allora che ci si vuole ordinare l'ordine foglio di stile qualcosa di più simile a questo:

<stylesheet src="css/bootstrap.min.css" /> 
<stylesheet src="gwt/clean/clean.css" /> 
<stylesheet src="css/gwt-bootstrap.css" /> 
<stylesheet src="MyApp.css" />