なぜ button の場合は .inactive が反映され #btn にすると反映されないのですか?

button などの要素セレクターは、class セレクターよりも詳細度が低いのでスタイルが反映されます。
2023年3月3日
ユーザー

お世話になります。
今回のレッスンの、ボタンのクリックイベントの指示した通り、

btn.classList.add('inactive');

がうまく反映されませんでした。
自分のコードを確認すると、CSS のボタン周りの書き方が、

・レッスン: button
・自分のコード: #btn

となっていたのが原因だったようです。
button に直すと、レッスン通りの挙動を示しました。

なぜ button の場合はレッスン通り「.inactive」が反映され、#btn で指示するとうまく反映されないのでしょうか。
CSS の詳細度?というやつ?

そのへんいまいち理解できておらず、調べてはみましたが、なぜそうなるのか理由が見つけられませんでした。はっきりした理由があれば教えていただけないでしょうか。

この回答を見るにはプレミアムプランへの登録が必要です

プレミアムプランとは?

このレッスンの質問と回答(1)