SASS スタイルはメディアクエリよりも優先されます

Question

メディアクエリを使用してデスクトップデバイスのスタイルをオーバーライドしようとしていますが、機能しないようです。 h2 要素に境界線の色を設定し、問題をよりわかりやすく視覚化するためにテストを実行しました。ご覧のとおり、h2 の境界線の色は黄色に設定されています。

これが私の SASS スタイルです:

リーリー

これは、同じページの下部にあるメディアクエリです。ご覧のとおり、境界線の色は赤に設定されていますが、境界線の色が赤であるはずのときに、依然として黄色の境界線が表示されています。ユニバーサルスタイルで黄色の境界線の色を削除すると、赤だけが表示されます。

リーリー

P粉348915572 · Answer

問題は、メインの CSS に事実上、より具体的なセレクターがあることです。リーリー

メディアクエリでオーバーライドしようとしているものは

ですリーリー

つまり、最初のものが勝ちです。最初のクラスには 4 つのクラスセレクターがありますが、2 番目のクラスセレクターには 3 つしかありません。

私の個人的な経験から言えば、SCSS や LESS のようなものの真のマイナス面の 1 つは、このような罠に陥る可能性があることです。 CSS は、「飼いならして」制御するのが非常に難しいツールです。

この問題を回避するには、次のようなトリックがあります。リーリー

はメディア状態ルールに使用されます。これでは間違いなく不快な思いをするでしょう。複雑なセレクターは罠です。一度開始すると、永遠にセレクターに囚われる運命にあるからです。