[解決済み] CSSセレクタで特定のクラス名を除外するには？

質問

というクラス名の要素にマウスを乗せると、背景色が適用されるようにしたいのですが。 "reMode_hover" .

しかし、私は色を変更したくありません。 また があります。 "reMode_selected"

注：ある種の限られた環境の中で作業しているため、javascriptではなくCSSしか使えません。

私の目標は、ホバー時に最初の要素に色を付け、2番目の要素には色を付けないことです。

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;
}

解決方法は？

1つの方法は、複数のクラスセレクタを使用することです（これは子孫セレクタであるため、スペースはありません）。

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