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

在CSS 選擇器中排除特定的類別名稱

在CSS 中，在某些情況下您可能需要從選擇器中排除特定的類別名稱。當您想要將樣式套用到多個元素，但某些元素不應繼承這些樣式時，這特別有用。

一個常見的情況涉及排除具有特定類別名稱的元素，同時將樣式套用於具有另一個類別名稱的元素。讓我們考慮以下範例：

<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_hover」類別名稱的元素。但是，如果元素也具有“reMode_selected”類別名，我們不想套用此顏色。

<code class="css">/* Do not apply background-color (leave empty) */
.reMode_selected .reMode_hover:hover { }

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

雖然您可能期望第一條規則會起作用，但它不起作用。這是因為在 CSS 中，類別名稱之間的空格表示後代選擇器。因此，「.reMode_selected .reMode_hover」翻譯為「選擇 .reMode_selected 的後代的 .reMode_hover 元素。」

要正確排除「reMode_selected」元素，我們需要使用「not()」選擇器。更新後的 CSS 將為：

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

此規則會將背景顏色套用至沒有 .reMode_selected 類別名稱的 .reMode_hover 元素。因此，只有第一個連結在懸停時才會收到背景顏色，而第二個連結則不會。

以上是如何在 CSS 選擇器中排除特定的類別名稱？的詳細內容。更多資訊請關注PHP中文網其他相關文章！