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

Question

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

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

リーリー

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

リーリー

Answer 1

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

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

です リーリー

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

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

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

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