覆盖 SASS class

Question

我想为用于过滤列表的组件定义样式。我做了一个 class 到 select 所有这些，然后我想覆盖一些 selected classes。 一些代码价值一千字：

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

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

但由于某种原因它不起作用。我虽然定义的顺序很重要，但似乎并非如此。而且我不能把 !important 放在任何地方。那我做错了什么？

Answer 1

那是因为 CSS 特异性。

div[class*="filter-"] 比 .filter-specific.

具有更好的特异性 (div + [class*="filter-"])

你可以用这个 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