如何覆蓋選擇器 [] 上的樣式不使用？重要嗎？

Question

我正在使用 UI 庫（Vuetify），這是它的代碼：

 .sample[data-2] {
       color:red;
 }

我想覆蓋所有具有.sample 類的元素，如下所示：

   .sample {
        color:blue;
   }

如果我使用'，重要'，那么它肯定有效。 但我想要更好的解決方案來覆蓋.sample[blabla] 類。

我試過 .sample[*], .sample[]... 沒用！

Answer 1

您可以通過包括：not pseudo class with a # id name 來增加 CSS 的特異性。

id 名稱必須是未在其他地方使用的名稱。

 div { margin: 10px; }.sample[data-2] { color: red; }.sample:not(#nonExistentId) { color: blue; }

 <h2>All these lines should be blue</h2> <div class="sample">a div with class sample</div> <div class="sample" data-2>a div with class sample and attribute data-2</div> <div class="sample" anyoldattribute>a div with class sample and any old atrribute</div>

有關更完整的解釋，請參閱MDN 。

特別是如果您需要支持較舊的瀏覽器版本，您可以使用:is、:matches 等的組合。