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でそれをテストすることができます。常にdivなります

.filter-specific場合、あなたはそれが好きで使用することができます：

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

 
div.filter-specific { 
 
    color: blue; 
 
}

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

参考：あなたはあまりにも、両方のセレクタから `削除div`できMDN CSS Specificity