覆盖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