Мои CSS переопределены Bootstrap CSS

Question

Я хочу добавить GWT-Bootstrap в мой уже запущенный проект. Мне удалось использовать его, но Bootstrap CSS переопределяет все другие CSS. В результате все мои предыдущие элементы пользовательского интерфейса перемешаны.

Поля, размер текста и множество элементов больше не подходят. Я не могу использовать Bootstrap, потому что весь остальной проект недоступен. Я хотел бы сделать прогрессивное изменение в Bootstrap и сохранить старые вещи, как есть.

Я хотел бы, чтобы мой CSSS в этом порядке приоритета:

• MyApp
• GWT
• Bootstrap

Я попытался заказать их в моем * .gwt.xml без успех:

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

Что я могу сделать?

Answer 1

Приоритет использованием стилей приводится более сложных алгоритмов, чем просто порядок включения в HTML. Стиль CSS выбирается с помощью наиболее конкретного правила выбора, где встроенные правила считаются более конкретными, а затем привязаны к внешнему виду, затем выбираются по идентификатору, затем классу и в конце выбора с именем тега. Например, пункт <p id="xyz" class="xyz"> будет красным, независимо от порядка правил:

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

Если есть два правила с одинаковым типом выбора, вопросы, номер. Итак, выбор .xyz .abc «сильнее», затем .qwerty.

Если два правила имеют эквивалентный выбор с точки зрения числа в каждой категории, а затем, в самом конце того учитывается ...

Вы также можете вызвать другой порядок с !important директивы.

Read more об этом с ключевыми словами «CSS specificity».

Answer 2

Путем переопределения стилей работа является последней загруженной победой.

Так что, если вы ждете стили от GWT-Bootstrap переопределить Bootstrap CSS, то вы хотите заказать что-то порядок таблиц стилей больше, как это:

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