CSS :not() 是否支援元素排除的多個參數？

揭穿:not() 偽類的多參數神話

在CSS 中，:not() 偽類允許根據特定標準排除元素。然而，有一個常見的誤解，即多個參數可以在偽類中連結在一起。當嘗試使用類型作為標準排除多種類型的輸入元素時，就會出現這種誤解。

考慮提供的範例：

form input:not([type="radio"], [type="checkbox"]) {
  /* css here */
}

意圖是選擇除單選之外的所有類型的輸入元素和複選框。然而，這種語法不起作用。

解決方案：打破排除標準

要解決這個問題，而不是在:not() 中鏈接多個參數， CSS 提供了一個簡單的解決方案：為每個排除標準使用單獨的:not() 語句。在這種情況下：

input:not([type="radio"])):not([type="checkbox"])

此語法正確選擇既不是單選也不是複選框的輸入元素。 :not() 偽類在獨佔的基礎上運行，因此使用多個語句可確保滿足要排除的元素的所有指定條件。

記住：

:not() 偽類別不支援在單一語句中連結多個參數。若要排除多種類型的元素，請為每個排除條件使用單獨的 :not() 語句。透過將排除標準分解為單獨的語句，您可以有效地定位 CSS 中所需的元素。

以上是CSS :not() 是否支援元素排除的多個參數？的詳細內容。更多資訊請關注PHP中文網其他相關文章！