インラインCSSスタイルをオーバーライドする方法

この2009年の記事は驚くほど人気が​​あり、CSSの基本の永続的な関連性を強調しています。 最新のCSSに興味がある場合は、Retinaディスプレイ用のCSSテクニックに関する最近の記事をご覧ください。

CSSの力は、そのカスケードの性質にあります。ブラウザがスタイルを選択および適用する方法を理解することが重要です。スタイルアプリケーションは包含方法、ルール順序、セレクターの特異性、

。 !importantインラインスタイル、HTML（例：

赤のテキスト

<p><strong style="color: red;">red text</strong></p> ）で直接定義され、最優先事項があります。 一般的に外部スタイルシートを支持して落胆していますが、レガシーシステムでは避けられない、またはHTMLの変更が制限されている場合。 外部スタイルシートからインラインスタイルをオーバーライドするには、次のものを使用します

これにより、インラインスタイルに関係なく、

strong[style] { color: blue !important; }

タグのテキストが青色になります。 これは、IE6および7を除き、メジャーブラウザ（IE8、Firefox 2、Opera 9、Safari、Chrome）で機能します。ただし、これは最後のリゾートです。クリーンなCSSを維持し、必要に応じてインラインスタイルをオーバーライドします。 高度なCSS技術のためのSitePointの学習可能なプラットフォームを探索することを検討してください

strongインラインCSSを上書きすることについてのよくある質問（FAQ）

Q：なぜオーバーライドインラインCSSが重要ですか？

A：インラインCSSのオーバーライドCSSのスタイリングを合理化し、再利用性を促進し（多くのページに1つのスタイルシート）、StyleSheetキャッシングを介してパフォーマンスを向上させます。

q：ルールはどのように機能しますか？

a：

その後のスタイル宣言をオーバーライドします。 特異性が高いためにデバッグを複雑にするため、控えめに使用してください（例：）。 !importantQ：外部CSSはインラインスタイルをオーバーライドできますか？

A：はい、しかしインラインスタイルは特異性が高くなります。 外部CSSの特異性を一致させるか、

。!importantを使用します color: blue !important;

Q：なぜ私のCSSがインラインスタイルをオーバーライドしないのですか？

a：インラインスタイルのより高いインラインスタイルの特異性、誤った宣言命令、またはインラインスタイルでのを確認してください。

Q：CSSルールの特異性を向上させる方法!important

a：より具体的なセレクター（id＆gt; class＆gt; type）、チェーンセレクター（例：）を使用するか、。

Q：CSSの優先順位は何ですか？ !importantA：特異性と宣言の順序は、優先順位を決定します。インライン＆gt; id＆gt;クラス＆gt;タイプ。

この順序に影響します。

Q：JavaScriptはインラインCSSをオーバーライドできますか？

a：はい、要素のプロパティを直接操作することにより（例えば、style）。 ただし、これによりインラインスタイルが追加されます。document.getElementById("myElement").style.color = "blue";

Q：WordPress/bootstrap/React？でCSSをオーバーライドする方法

A：WordPress：子のテーマまたはカスタムCSSプラグインを使用します。ブートストラップ：BootstrapのCSSの後にリンクされたカスタムCSSファイルを作成します。反応：インラインスタイルまたはCSSモジュールを使用します。 常にセレクターの特異性を検討してください

コメントは閉じられています。 フォーラムでCSSの質問をしてください

以上がインラインCSSスタイルをオーバーライドする方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。