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

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

在 JavaScript 不可用的有限環境中工作時，CSS成為動態造型的必備工具。一個常見的挑戰是，當某些元素還具有另一個類別時，如何防止它們受到特定 CSS 規則的影響。

為了說明這一點，請考慮更改元素背景顏色的任務懸停時除非它也具有“reMode_selected”類別。以下程式碼示範了實現此目的的嘗試：

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

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

但是，此方法會失敗，因為它的目標元素同時具有“reMode_hover”和“reMode_selected”類，無論懸停事件是否發生被觸發。要解決此問題，必須使用不含空格的多類選擇器（後代選擇器）：

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

此選擇器使用“:not”偽類從“reMode_selected”類別中排除元素將滑鼠懸停在“reMode_hover”元素上時的背景顏色樣式。

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