Sto cercando di applicare il colore di sfondo quando un mouse dell'utente passa il mouse sull'elemento il cui nome della classe è "reMode_hover".

Ma io non voglio cambiare colore se l'elemento anche ha"reMode_selected"

Nota: posso usare solo CSS non javascript perché sto lavorando in una sorta di ambiente limitato.

Per chiarire, il mio obiettivo è quello di colorare il primo elemento al passaggio del mouse ma non il secondo elemento.

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>

Ho provato di seguito sperando che la prima definizione avrebbe funzionato, ma non lo è. Che cosa sto facendo di sbagliato?

CSS

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

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

Un modo è quello di utilizzare il selettore di classi multiple (nessuno spazio in quanto è il selettore discendente):

.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>

Nei browser moderni puoi fare:

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

Consultare http://caniuse.com/css-sel3 per informazioni sulla compatibilità.

Metodo 1

Il problema con il vostro codice è che si sta selezionando il .remode_hoverche è un discendente di .remode_selected. Quindi la prima parte per far funzionare correttamente il codice è rimuovendo quello spazio

.reMode_selected.reMode_hover:hover

Quindi, per far sì che lo stile non funzioni, devi sovrascrivere lo stile impostato da :hover. In altre parole, è necessario contrastare la background-colorproprietà. Quindi sarà il codice finale

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

Violino

Metodo 2

Un metodo alternativo sarebbe quello di usare :not(), come affermato da altri. Ciò restituirà qualsiasi elemento che non ha la classe o la proprietà dichiarata tra parentesi. In questo caso, ci inseriresti .remode_selected. Questo mirerà a tutti gli elementi che non hanno una classe di.remode_selected

Violino

Tuttavia, non consiglierei questo metodo, a causa del fatto che è stato introdotto in CSS3, quindi il supporto del browser non è l'ideale.

Metodo 3

Un terzo metodo sarebbe usare jQuery. Puoi .not()scegliere come target il selettore, che sarebbe simile all'utilizzo :not()nei CSS, ma con un supporto browser molto migliore

Violino