如何在 CSS 選擇器中排除特定的類名？

Question

當用戶鼠標懸停在類名為"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;
}

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

Answer 2

在現代瀏覽器中，您可以執行以下操作：

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

有關兼容性信息，請參閱http://caniuse.com/css-sel3 。

Answer 3

方法一

與您的代碼的問題是，你選擇.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;
}

小提琴

方法二

另一種方法是使用:not() ，如其他人所述。 這將返回沒有括號內聲明的類或屬性的任何元素。 在這種情況下，您可以將.remode_selected放在那里。 這將針對所有沒有.remode_selected類的.remode_selected

小提琴

但是，我不會推薦這種方法，因為它是在 CSS3 中引入的，因此瀏覽器支持並不理想。

方法三

第三種方法是使用 jQuery。 您可以定位.not()選擇器，這類似於在 CSS 中使用:not() ，但具有更好的瀏覽器支持

小提琴