如何從 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>

但是，這將無法正常工作，因為第一個規則覆蓋第二條規則。選擇器：

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

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

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