如何從 CSS 選擇器中排除特定類別：逐步指南

從CSS 選擇器中排除特定類別

當定位具有多個類別的元素時，準確選擇或排除特定類別以實現所需的效果變得至關重要造型。本文討論了一種常見場景，您需要將背景顏色應用於具有特定類別的元素，但請排除那些也具有其他特定類別的元素。

範例場景

考慮以下HTML 標記：

<code class="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></code>

目標是當使用者將滑鼠停留在第一個連結上時套用背景顏色它，但從該效果中排除第二個鏈接，因為它具有附加類別“reMode_selected”。

初始嘗試

您可以先嘗試以下CSS：

<code class="css">.reMode_selected .reMode_hover:hover {}

.reMode_hover:hover {
   background-color: #f0ac00;
}</code>

但是，這將無法正常工作，因為第一個規則會覆蓋第二個規則。要正確排除具有“reMode_selected”類別的元素，請使用多類別選擇器：

<code class="css">.reMode_hover:not(.reMode_selected):hover {
   background-color: #f0ac00;
}</code>

此規則以具有“reMode_hover”類別的元素為目標，但排除那些也具有“reMode_selected”類別的元素都懸停在上面。因此，第一個連結將在懸停時接收背景顏色，而第二個連結將保持不變。

以上是如何從 CSS 選擇器中排除特定類別：逐步指南的詳細內容。更多資訊請關注PHP中文網其他相關文章！