Как узнать, какой стиль переопределяет другой стиль?

У меня есть версия HTML/CSS сайта (построенная на Bootstrap), которую я переводил в приложение Rails 3.

Конвейер активов сводит меня с ума.

Из-за файла bootstrap_and_overrides.css.scss , который генерируется камнем, существуют конфликты между тем, как он появляется в моем приложении Rails и только в обычных файлах HTML.

Одна из таких вещей, по-видимому, является переопределением некоторых стилей шрифтов.

Например, предполагается, что 1 h3 должен выглядеть.

HTML style

Вот как этот же h3 отображается в моем приложении Rails.

Rails style

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

Мне бы понравились советы о том, как я могу узнать, почему это делается.

Кроме того, одна вещь, которая прослушивает меня, - это media = all в версии Rails на этом скриншоте. Не уверен, что это может повлиять на эти проблемы.

Изменить 1

As @coreyward pointed out, it may have been the order in which my stylesheets are initialized. In my original HTML/CSS files, the Bootstrap & Font-Awesome related CSS are declared before the main.css. But in Rails, it's the opposite way around.

Учитывая, что мое первоначальное объявление в application.html.erb выглядит следующим образом:

<%= stylesheet_link_tag "application", :media => "all" %>

Как изменить порядок этих действий?

Изменить 2

Я использую этот жучок самонастраивающейся системы , и проблема в том, что он не хотите, чтобы вы использовали директиву //= require , поэтому я не могу просто переупорядочить порядок в файле манифеста CSS. Вернее, я не уверен, как это сделать.

Мысли?

1
добавлено отредактировано
Просмотры: 1
Hrmm .... интересный момент ... Я мог бы точно перенести перевод. Но проблема в том, что у меня только 1 таблица стилей - application.css.scss , а затем я включил таблицы стилей Bootstrap. Edit1: Кстати, возможно, вы правы. Я замечаю, что в обычной версии HTML вызывается main.css после таблицы стилей, связанных с загрузкой. В Rails это наоборот. Как исправить это, если только что я сделал: <% = stylesheet_link_tag "application",: media => "all"%> в моем макете?
добавлено автор marcamillion, источник
Правильно ... см. Мой обновленный комментарий. Как указать Bootstrap перед моими стилями в Rails?
добавлено автор marcamillion, источник
@Nic Я обновил вопрос, чтобы понять, почему использование файла манифеста CSS не будет работать с моим текущим самоцветом Bootstrap.
добавлено автор marcamillion, источник
Хорошо ... Я изменил драгоценные камни, и я использую самоцвет Bootstrap, который позволяет мне использовать директивы require . Затем я играл с порядком некоторых стилей, и теперь он работает.
добавлено автор marcamillion, источник
@marcamillion. Вы можете сделать это в файле манифеста CSS. См .: CSS в определенном порядке"> stackoverflow. ком/вопросы/8890929/& hellip;
добавлено автор Nic, источник
Консолидация активов не виновата здесь вообще, но если вы не включаете активы в желаемом порядке, которые могут иметь непреднамеренный эффект. Вероятно, вам следует обновить свои знания о том, как стили каскадируются в каскадных таблицах стилей.
добавлено автор coreyward, источник
Все конвейеры активов заключаются в конкатенации и минимизации. Если вы ставите одинаковые специальные селекторы после других, они будут переопределять любые те же свойства. Вот почему вы включаете Bootstrap, прежде чем определять свои собственные стили.
добавлено автор coreyward, источник
@marcamillion. Вы хотите использовать инструкции @import в Sass вместо директив require , и порядок все еще имеет значение. Как выглядит ваш application.css ? И что такое main.css ?
добавлено автор coreyward, источник

2 ответы

media = all означает только включение экрана и печать. Если вам не нравится, как выглядит сайт, когда кто-то его печатает, вы можете просто сделать media = "screen" . Что касается того, почему некоторые из этих стилей так переоцениваются. Удостоверьтесь, что в вашей платежировании активов вы не включаете scaffold.css с кодом require_tree. . Это обычно получает много людей. Кроме того, вам не нужно включать весь файл bootstrap_and_overrides. Вы могли бы просто = потребовать twitter/bootstrap/bootstrap , если хотите только эту часть. Надеюсь, что ты подберешься.

1
добавлено
Yeh У меня нет scaffold.css в моей папке stylesheets. Это сбило меня с толку в прошлом, так что я давно избавился от него. Проблема связана с порядком в файле манифеста. Проблема также в том, что конкретный жук, который я использую (bootstrap-sass), не похож на директивы //= require .
добавлено автор marcamillion, источник
обновил вопрос.
добавлено автор marcamillion, источник

Я переключил камни из bootstrap-sass в twitter-bootstrap-rails , что позволило мне указать порядок директив require .

После игры с правильным порядком директив я наконец нашел тот, который, кажется, исправил мои проблемы.

0
добавлено