CSS «цвет» не работает

Question

У меня есть link_to, как показано ниже:

<td><%= link_to '<span class="glyphicon glyphicon-trash"></span>Delete it'.html_safe, post, method: :delete, data: {confirm: 'Are you sure?'}, class: 'btn btn-danger btn-lg white' %></td> 

Как вы можете видеть, я добавил класс «белый» к нему. Для этого нужно определить CSS, чтобы цвет текста «Удалить его» в кнопке белый. CSS выглядит следующим образом:

.white { 
    color: white; 
    background-color: yellow; 
} 

Проблема в том, что все параметры, отличные от «цвета», отлично работают в CSS. Например, в вышеупомянутом случае «фоновый цвет» работает нормально, но «цвет» - нет. Цвет текста никогда не изменяется (по умолчанию - черный).

Я не вижу, где я ошибаюсь. Как я могу это решить?

Answer 1

Похоже, что вы можете использовать Bootstrap. Загрузили ли вы свой собственный файл CSS после загрузки Bootstrap? Для быстрого решения, вы можете попробовать:

.white { color: white !important; } 

Но это трудно рекомендовать в качестве постоянного решения, это своего рода бестактность.

Чтобы узнать, какой CSS на самом деле дает цвет текста, щелкните его правой кнопкой мыши, проверьте элемент (или что-то еще для вашего браузера), а затем проверьте вычисленный CSS, как было рекомендовано выше.

Answer 2

Ответ пользователя3783614 правильный и самый простой способ реализовать это. Я хотел ответить на ваш вопрос в своем комментарии.

Да, вы можете изменить их непосредственно переопределить самозагрузки, как вы делали

.white{ 
    color: white; 
    background-color:yellow; 
} 

но то, что вам нужно сделать, это вместо *= require bootstrap в application.css Используйте CSS функцию импорта на пользовательском файле CSS. Вроде так

@import 'bootstrap'; 
.white{ 
    color: white; 
    background-color:yellow; 
} 

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

Чтобы истинно убедиться, что вы можете использовать класс, как это

.btn.btn-danger.white{ 
    color: white; 
    background-color:yellow; 
} 

Так как btn-danger устанавливает цвет добавляет новый уровень иерархии обеспечит приоритет.

Вот jsFiddle