Помогите с селекторами CSS (jQuery datepicker)

Question

Я пытаюсь стилизовать JQuery DatePicker. Я не могу использовать тему jQuery, так как она разрушает остальную часть моего сайта.

У меня все работает, ожидайте один бит - выделение текущего дня.

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

<td class="ui-datepicker-days-cell-over  ui-datepicker-today">
    <a class="ui-state-default ui-state-highlight ui-state-hover" href="#">14</a>
</td>

Когда пользователь наводит курсор на любой другой день, ui-state-hover в текущем дне удаляется, а затем подсветка текущего дня работает нормально:

<td class="ui-datepicker-days-cell-over  ui-datepicker-today">
    <a class="ui-state-default ui-state-highlight" href="#">14</a>
</td>

Мой CSS для состояния наведения таков:

.ui-widget-content .ui-state-hover { ... }

и при загрузке это перезаписывает мой ui-state-highlight, который выделяет текущий день.

Я пытался сделать:

.ui-widget-content .ui-state-highlight .ui-state-hover { ... }

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

Итак, вопрос в том, как мне сделать .ui-state-highlight .ui-state-hover переопределить .ui-state-hover, чтобы я не потерял свой основной момент при наведении?

Спасибо.

Answer 1

Вы можете попробовать добавить элемент, чтобы поднять его место, например, в иерархии td.ui-widget-content td.ui-state-hover.Кроме того, возможно, это не самое элегантное решение, но добавление встроенного стиля или фактической HTML-страницы в качестве заголовка в тегах <style></style будет иметь приоритет над любыми другими таблицами стилей при условии, что это последний вызванный файл.

Answer 2

Не идеально, но вы можете добавить !important к каждому из ваших стилей внутри селектора, чтобы переопределить его своим собственным стилем:

.ui-widget-content .ui-state-hover {
  color: '#00ff00' !important;
}