Добавьте менее конкретный класс без! Важных

Question

У меня есть следующие правила CSS:

.bookItem:hover { background: rgba(0,150,255,0.1); }

.selected { background: rgba(0,150,255,0.2) !important; }

При нажатии на bookItem я использую jQuery, чтобы добавить к нему выбранный класс. Проблема в том, что без !important выбранный класс не отображается, пока мышь больше не зависает. Я знаю, что это потому, что псевдокласс: hover делает этот селектор «более конкретным».

Можно ли изменить класс .selected, чтобы он имел более высокий приоритет, чем: bookItem: hover без !important?

Answer 1

Ну, на мой взгляд, вам следует вообще пересмотреть использование этого ключевого слова css.! важный - слишком мощный инструмент, и он в основном разрушает всю иерархию, имеющуюся в css, что очень затрудняет отладку вашего кода.Его использование должно быть ограничено небольшим количеством крайних примеров, когда нет выхода.

Опять же, на мой взгляд, вы должны попытаться использовать как можно больше html-тегов, затем использовать классы и идентификаторы и, наконец, конкретные атрибуты css.Я бы пошел с составленным классом, как предложили мои товарищи:

.bookitem.selected { back... ; }

Наконец, для дополнительной информации, вы можете прочитать этот пост в журнале Smashing

Answer 2

Я бы предложил изменить специфичность .selected на .bookItem.selected

Демо: http://jsfiddle.net/WK34y/

Answer 3

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

.selected,.selected:hover { background: rgba(0,150,255,0.2)}

рабочий пример

Answer 4

Это проблема специфичности.В вашей таблице стилей определите .selected так