問題描述

在 CSS 中有什麼像= =(不等於) 例如，我有以下程式碼：

input {
 ... 
 ...
}

但是對於一些輸入，我需要使它失效。我想透過將”reset” 類新增到輸入標籤，例如

<input class="reset" ... />

然後從 CSS 中跳過此標籤。

我該怎麼辦？

我可以看到的唯一方法是將一些類新增到輸入標籤中，並重寫 CSS，如下所示：

input.mod {
 ...
 ...
}

最佳解決方案

在 CSS3 中，您可以使用:not()篩選器，但並不是所有的瀏覽器都完全支援 CSS3，所以請確定你知道你在做什麼。

例：

<input type="text" value="will be matched" />
<input type="text" value="will not be matched" class="avoidme" />
<input type="text" value="will be matched" />

和 CSS

input:not(.avoidme) { background-color: green; }

如果您不想使用 CSS3，可以在所有元素上設定樣式，然後使用類重置它。

input { background-color: greeen; }
input.avoidme { background-color: white; }

次佳解決方案

您也可以透過’reverting’ 在 CSS 中重置類的更改。

INPUT { 
    padding: 0px;
}
INPUT.reset {
    padding: 4px;
}

第三種解決方案

CSS3 有:not()，但它並沒有在所有瀏覽器中實現。然而，它在 IE9 平臺預覽中實現。

input:not(.reset) { }

http://www.w3.org/TR/css3-selectors/#negation

在此期間，您必須堅持使用 old-fashioned 方法。

第四種方案

有趣的只是嘗試使用 JQuery 選擇 DOM 元素，它的工作原理！ 🙂

$("input[class!='bad_class']");

此頁面有 168 個 div，沒有類’comment-copy’

$("div[class!='comment-copy']").length => 168
$("div[class!='.comment-copy']").length => 168

參考文獻

注：本文內容整合自 Google/Baidu/Bing 輔助翻譯的英文資料結果。如果您對結果不滿意，可以加入我們改善翻譯效果：薇曉朵技術論壇。