Question

我想为我用来过滤列表的组件定义样式。我创建了一个类来选择所有这些，然后我想覆盖一些选定的类。有些代码值得千言万语：

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

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

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

Answer 1

那是因为CSS特异性。

baseDir具有更好的特异性（div[class*="filter-"] + div），然后是[class*="filter-"]。

您可以使用此CSS Specificity calculator进行测试。

如果.filter-specific始终是.filter-specific，那么您可以像以下一样使用它：

div

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