Как повысить приоритет стилей в css, если к странице подключены два файла css

Question

В index.css задан цвет кнопки

button {
    border-color: #659BDB;
    color: #191970;
}
button:hover {
    background: #659BDB;
    color: white;
}

Затем на другой странице в element.css он переопределен

.payment {
    border-color: #EE0000;
    color: #EE0000;
}
.payment::hover {
    background: #EE0000;
    color: white;
}

Цвет рамки поменялся на нужный. Но при наведении мышки, кнопка подсвечивается синим. Что не так?

Answer 1

В css различают псевдо-классы и псевдо-элементы.

Для указания псевдо-класса используется одинарное двоеточие (:), например:

Для указания псевдо-элементов используется двойное двоеточие (::), например:

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

Так как в вопросе речь про псевдо-класс, нужно изменить

.payment::hover

на

.payment:hover

button {
    border-color: #659BDB;
    color: #191970;
}
button:hover {
    background: #659BDB;
    color: white;
}

.payment {
    border-color: #EE0000;
    color: #EE0000;
}

.payment:hover {
    background: #EE0000;
    color: white;
}

.payment::hover { /* не работает */
    background: black;
    color: green;
}

<button class="payment">button</button>

БЛОГ НА HUSL

Как повысить приоритет стилей в css, если к странице подключены два файла css

Ответы (1 шт):