複数のclass指定を持つ要素にCSSが反映されない

Question

追記：
https://www.youtube.com/watch?time_continue=305&v=9cKsq14Kfsw&feature=emb_logo

こちらの動画の元にした写経中でした。
問題の箇所は１：０２：１３　あたりです。

Bootstrap4で実装中で、
複数のclass指定を持つ要素に対して、cssで1つのclass指定だけだと反映されない。
しかし、複数のclass指定だと反映される。
原因は何が考えられるでしょうか。

（例）
HTML
<button type="button" class="btn btn-primary btn-lg">~</button>

CSS
.btn-primary {
background-color: #6648b1;
}
↑反映されない　❌

HTML
<button type="button" class="btn btn-primary btn-lg">~</button>

CSS(class指定の間に半角スペース)
.btn .btn-primary {
background-color: #6648b1;
}
↑反映されない　❌

HTML
<button type="button" class="btn btn-primary btn-lg">~</button>

CSS
.btn.btn-primary {
background-color: #6648b1;
}
↑反映される　⭕️

Comments

[hoshi-takanori]

CSS ファイルを読み込む順番はどうなってますか？

Answer 1

「CSS 詳細度」でWEB検索してみてください。

.btn.btn-primaryとすることで詳細度が上がるので、反映されるようになるのでしょう。

Answer 2

HTML上でのクラスの書き方と、CSS上でのセレクタの書き方が少し違うので違和感があるのでしょうか。
また、CSSの詳細度についても入門書等を探して確認してみてください。

【CSS セレクター - CSS: カスケーディングスタイルシート | MDN】
https://developer.mozilla.org/ja/docs/Web/CSS/CSS_Selectors

【CSS 複数のセレクタを指定する/絞り込むサンプル | ITSakura】
https://itsakura.com/css-multi-selector

【詳細度 - CSS: カスケーディングスタイルシート | MDN】
https://developer.mozilla.org/ja/docs/Web/CSS/Specificity

【CSS のセレクタ/継承/詳細度　Web Design Leaves】
https://www.webdesignleaves.com/pr/css/css_basic_01.html

Comments

[HidekiWatanabe]

追記の動画との違いは何が考えられるでしょうか