Moje CSS są nadpisywane przez Bootstrap CSS

Question

Chcę dodać GWT-Bootstrap do mojego już rozpoczętego projektu. Udało mi się go użyć, ale CSS Bootstrap nadpisuje każdy inny CSS. W rezultacie wszystkie moje poprzednie elementy interfejsu są pomieszane.

Margines, rozmiar tekstu i wiele elementów nie pasują do siebie. Nie mogę używać Bootstrapa, ponieważ cała reszta projektu jest bezużyteczna. Chciałbym dokonać progresywnej zmiany w Bootstrapie i zachować stare rzeczy takimi, jakimi są.

chciałbym mieć moje CSSS w tym priorytecie kolejności:

• MojaApl
• GWT
• Bootstrap

Próbowałem zamówić je w moim * .gwt.xml bez sukces:

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

Co mogę zrobić?

Answer 1

Priorytetem wykorzystaniem stylów jest napędzany przez więcej skomplikowane algorytmy, niż tylko zamówienie na włączenie do HTML. Styl CSS jest wybierany przy użyciu najbardziej szczegółowej reguły wyboru, w której reguły wbudowane są uważane za bardziej szczegółowe, a następnie przypisywane zewnętrznie, a następnie selekcja według ID, następnie klasa i na końcu wybór z nazwą znacznika. Na przykład, ustęp <p id="xyz" class="xyz"> będzie czerwony niezależnie od kolejności reguł:

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

Jeśli istnieją dwie zasady z tego samego rodzaju selekcji, numer sprawy. Tak więc wybór .xyz .abc jest "silniejszy" niż .qwerty.

Jeśli dwie reguły mają równoważną wybór pod względem liczby w każdej kategorii, a następnie, w samym celem końcowym jest brane pod uwagę ...

Można także wymusić inną kolejność z dyrektywą !important.

Read more o tym ze słowami kluczowymi "CSS specificity".

Answer 2

Sposób nadpisywania stylów pracy jest ostatnim ładowanym zwycięstwem.

Więc jeśli spodziewasz się style z GWT-Bootstrap przesłonić Bootstrap CSS czym tylko chcesz zamówić coś zamówić stylów więcej tak:

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