Заменить box-shadow
У меня на странице 2 файла .css в таком порядке
<link rel = "stylesheet" type = "text/css" href = "main.css">
<link rel = "stylesheet" type = "text/css" href = "calib.css">
В main.css у меня есть
input[type = "button"]{
box-shadow: 0 0px 10px blue;
}
и в calib.css у меня есть
.btn-active{
box-shadow: 0 0px 10px red;
}
В HTML я помещаю эти элементы
<input type = "button" class = "btn-active" value = "Button 1">
<input type = "button" class = "" value = "Button 2">
Но цвет тени в кнопке 1 остается синим.
Есть ли способ заменить значение свойства CSS без создания нового класса с содержимым input [type = "button"]?
Спасибо!
Попробуйте использовать input.btn-active
—
19.05.2018 12:01
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Введение в CSS
CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.
Как выровнять Div по центру?
Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
Toor - Ангулярный шаблон для бронирования путешествий
Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...
0
2
322
3
Перейти к ответу
Данный вопрос помечен как решенный
Ответы 3
Ответ принят как подходящий
Нет необходимости использовать !important. используйте input.btn-active вместо
input[type = "button"]{
box-shadow: 0 0px 10px blue;
}
input.btn-active{
box-shadow: 0 0px 10px red;
}<input type = "button" class = "btn-active" value = "Button 1">
<input type = "button" class = "" value = "Button 2">> .btn-active{
box-shadow: 0 0px 10px red !important;
}
или же
input.btn-active{
box-shadow: 0 0px 10px red;
}
Второй способ я обнаружил 5 минут назад, используя для этого input[type = "button"].btn-active. Спасибо!
—
19.05.2018 12:20
Вы должны быть более конкретными, указывая свои селекторы.
Вы можете использовать input.btn-active и сохранить тот же порядок, в котором вы указываете CSS.
input[type = "button"] {
box-shadow: 0 0 10px blue;
}
input.btn-active {
box-shadow: 0 0 10px red;
}<form>
<input type = "button" class = "btn-active" value = "Button 1">
<input type = "button" class = "" value = "Button 2">
</form>Если вы хотите быть более конкретным, используйте input[type = "button"].btn-active. Таким образом, указав это так, также будет работать:
input[type = "button"].btn-active {
box-shadow: 0 0 10px red;
}
input[type = "button"] {
box-shadow: 0 0 10px blue;
}<form>
<input type = "button" class = "btn-active" value = "Button 1">
<input type = "button" class = "" value = "Button 2">
</form>Другие вопросы по теме
Javascript: как покрыть всю площадь?
Как сохранить onclick при вставке в div contentEditable
Css clip-path без промежутка между ними
Как получить данные из более чем одной таблицы с помощью сеанса?
При наведении курсора мыши на меню отдела я хочу создать раскрывающееся меню
Пейджер меньше по размеру и без границ
Создание статического логотипа относительного div-клипа при прокрутке - CSS
Карточка начальной загрузки наложена на другую карточку (изображения)
Понимание видимости: свернуть столбец таблицы в соответствии с документацией W3C
Перекрывающиеся элементы в HTML
Похожие вопросы
Как сохранить onclick при вставке в div contentEditable
Как получить данные из более чем одной таблицы с помощью сеанса?
При наведении курсора мыши на меню отдела я хочу создать раскрывающееся меню
Форма не отправляется при нажатии на модальную кнопку
Карточка начальной загрузки наложена на другую карточку (изображения)
Реагировать | Как получить длину div по идентификатору / классу?
Удаление docinfo в выводе документов с помощью средства записи HTML5
Я застрял на веб-странице html / javascript
Почему разрыв строки не работает в PHP-коде
Перекрывающиеся элементы в HTML
Вы хотите попасть в ад
!important. Такжеstyleперезаписывается, когда вы используете тот жеselectorв файле.