覆蓋SASS類

Question

我想爲我用來過濾列表的組件定義樣式。我做了一個類來選擇它們，然後我想重寫一些選定的類。 一些代碼是勝過千言萬語：

div[class*="filter-"] { 
     (some property) 
} 

.filter-specific { 
    (do something more specific) 
} 

但由於某種原因，這是行不通的。我認爲定義的順序很重要，但似乎並非如此。我不能把!important無處不在。那麼我做錯了什麼？

Answer 1

這是因爲CSS的特殊性。

div[class*="filter-"]具有更好的特異性（div + [class*="filter-"]）然後.filter-specific。

你可以用這個CSS Specificity calculator來測試它。

如果.filter-specific將永遠是一個div，那麼你可以使用它像：

div[class*="filter-"] { 
 
    color: red; 
 
} 
 

 
div.filter-specific { 
 
    color: blue; 
 
}

<div class="filter-foo">bar</div> 
 
<div class="filter-specific">spec</div>

參考：MDN CSS Specificity