Я намагаюся застосувати фоновий колір, коли миша користувача наводить елемент, ім'я якого класу "reMode_hover".

Але я не хочу змінювати колір, якщо елемент також є"reMode_selected"

Примітка. Я можу використовувати лише CSS не javascript, оскільки я працюю в якомусь обмеженому середовищі.

Для уточнення, моя мета - забарвити перший елемент на наведення курсору, але не другий.

HTML

<a href="" title="Design" class="reMode_design  reMode_hover">
    <span>Design</span>
</a>

<a href="" title="Design" 
 class="reMode_design  reMode_hover reMode_selected">
    <span>Design</span>
</a>

Я спробував нижче сподіваючись, що перше визначення спрацює, але це не так. Що я роблю неправильно?

CSS

/* do not apply background-color so leave this empty */
.reMode_selected .reMode_hover:hover 
{
}

.reMode_hover:hover 
{
   background-color: #f0ac00;
}

Один із способів полягає у використанні селектора множинних класів (немає місця, оскільки це селекторний набір):

.reMode_hover:not(.reMode_selected):hover 
{
   background-color: #f0ac00;
}

<a href="" title="Design" class="reMode_design  reMode_hover">
    <span>Design</span>
</a>

<a href="" title="Design" 
 class="reMode_design  reMode_hover reMode_selected">
    <span>Design</span>
</a>

У сучасних браузерах ви можете:

.reMode_hover:not(.reMode_selected):hover{}

Зверніться до http://caniuse.com/css-sel3 щодо інформації про сумісність.

Спосіб 1

Проблема з кодом є те , що ви вибираєте , .remode_hoverщо є нащадком з .remode_selected. Отже, перша частина правильного роботи коду - це вилучення цього простору

.reMode_selected.reMode_hover:hover

Потім, щоб змусити стиль не працювати, вам доведеться перекрити стиль, встановлений символом :hover. Іншими словами, вам потрібно протидіяти background-colorмайну. Тож остаточний код буде

.reMode_selected.reMode_hover:hover {
  background-color:inherit;
}
.reMode_hover:hover {
  background-color: #f0ac00;
}

Скрипка

Спосіб 2

Альтернативним методом було б використання :not(), як заявляють інші. Це поверне будь-який елемент, який не має класу чи властивості, зазначених у дужках. У цьому випадку ви б .remode_selectedтам помістилися . Це буде націлено на всі елементи, які не мають класу.remode_selected

Скрипка

Однак я б не рекомендував цей метод через те, що він був введений у CSS3, тому підтримка браузера не є ідеальною.

Спосіб 3

Третім методом буде використання jQuery. Ви можете орієнтуватися на .not()селектор, який буде подібний до використання :not()в CSS, але із значно кращою підтримкою браузера

Скрипка