Добавить менее специфичный класс без !важно

#css #css-selectors

#css #css-селекторы

Вопрос:

У меня есть следующие правила 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 ?

1. покажите HTML, чтобы мы знали, что вы выбираете.

2. это возможно, если вы знаете, как CSS обрабатывает прецеденты. Я немного устал, но я считаю, что наименьший приоритет имеют внешние стили (то есть файлы), затем внутренние стили (файлы css на сервере вашего домена), а затем встроенные стили (хотя на это смотрят свысока). Кто-нибудь, поправьте меня, потому что я могу ошибаться.

Ответ №1:

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

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

 .bookitem.selected { back... ; }

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

Ответ №2:

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

Демонстрация: http://jsfiddle.net/WK34y/

Ответ №3:

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

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

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

Ответ №4:

Это проблема специфики. В вашей таблице стилей define .selected следующим образом

 div item#books .selected {bacground: rgba(0,150,255,0.2);}

http://css-tricks.com/855-specifics-on-css-specificity/