ポートフォリオ Web サイトで初めてメディア クエリを使用しています。**!important**縦向きバージョンと横向きバージョンのロゴのパディングを変更する必要がある場合は、ステートメントを使用する必要があります。メディア クエリのスタイルシートにリンクされた外部スタイルシートがあり、メインのスタイルシートからスタイルをオーバーライドして、メディア クエリがリッスンできるようにするために重要なものを使用する必要があります。
!importantタグは、私の Web サイトの iPad バージョンのスタイルを設定するために必要であるため、スタイルシートのさらに下にある他のデバイスのスタイルを変更することを妨げています。
のような新しいクエリにスタイルを追加できるようですdisplay:noneが、追加する必要がある場合は、メインのスタイルシートをオーバーライドするタグがpadding-left:20px必要です。!important
手伝ってくれますか？
以前の回答で述べたように、特定の限られた状況を除いて !important の使用を避けるのが最善です。
スタイルをオーバーライドするためにそれを使用していることがわかった場合、それはいくつかの異なる問題の兆候である可能性があります。おそらく、最初のルールのように特定性の高いセレクターを使用していて#header #logo、メディア クエリ ブロックで .logo のようなクラスでオーバーライドしようとしているのでしょう。
もう 1 つの原因は、長いセレクターである可能性があります。たとえば#header #header-inner .logo-wrap #logo、これもかなり悪い考えです。詳しくは、Harry Roberts のhttp://csswizardry.com/2012/05/keep-your-css-selectors-short/を参照してください。
コードを見ずに知るのは難しいですが、一般的にはセレクターを短く保ち、CSS へのモジュラー アプローチを使用することが役立ちます。
!important を使用すると便利な場合の chipcullen のリストに追加するだけです。
そして、印刷スタイルシートで述べたように、変更できないサードパーティのコードを使用する場合。
(JavaScript によって注入されたスタイルをオーバーライドするために使用する必要があることに同意しません。代わりに、クラス名を操作することで同じ目的を達成し、問題を回避するより良い方法があるためです。classList API を使用すると、これが非常に簡単になり、ポリフィルも利用できます。 )
最初のコメント投稿者が言ったように、私たちはいくつかのコードを見る必要があります。
全体として、特異性の問題に直面しているようです。!important次の3つの場合を除いて、実際に使用する必要はありません。
メディアクエリと具体性に関しては、順序が重要であることを忘れないでください。セレクターの特異性が同じレベルの場合、最後のセレクターが優先されます。一般に、メディアクエリを使用してスタイルシートを作成する場合の適切なアプローチは次のとおりです。