css - 覆盖 SASS 类

Question

我想为用于过滤列表的组件定义样式。我做了一个类来选择所有这些，然后我想覆盖一些选择的类。 一些代码值(value)一千字:

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