CSSでは、スタイルの優先度は特異性とソース順序のルールによって決定されます。特異性は、条件の一致に基づいて、ブラウザによってどのCSSルールが適用されるかを決定します。ソース順序は、ブラウザがCSSを読み取る順序で、特異性が同じ場合、後のルールが前のルールを上書きします。

CSSの特異性

特異性は以下のように決定されます

1. インラインスタイル（要素のstyle属性）は最も高い特異性を持ちます。
2. IDセレクタは、クラスセレクタ、属性セレクタ、および疑似クラスよりも高い特異性を持っています。
3. クラスセレクタ、属性セレクタ、および疑似クラスは、タイプセレクタおよび疑似要素よりも高い特異性を持っています。

CSSのソース順序

2つのセレクタが同じ特異性を持つ場合、CSSの最後に来るものが適用されます。

Sassでの特異性の調整

Sassでは、セレクタをより具体的にすることでスタイルの特異性を調整できます。たとえば、body .pinkは.pinkや.default-grayよりも具体的です。

body .pink {
  background-color: pink;
}

.default {
  &-gray {
    background-color: gray;
  }
}

&は、Sassの特別な機能で、親セレクタを参照します。ここでは、&-grayはCSSで.default-grayにコンパイルされます。

これは、以下のCSSにコンパイルされます

body .pink {
  background-color: pink;
}

.default-gray {
  background-color: gray;
}

この例では、.pinkと.default-grayが同じ要素に適用されている場合でも、.pinkのスタイルはその具体的なセレクタのために高い特異性を持っているので、そのスタイルが優先され、背景色がpinkになります。 注意: ただし、より具体的なセレクタを使用すると、CSSルールの柔軟性が制限されるため、少ない要素にしか適用されません。必要に応じて最も適切な方法を選択してください。