この記事は、100 回書かれ、質問された CSS の質問を記念するためのものです。 聞く: CSS セレクターとは何ですか?どのプロパティが継承されますか?優先度?インラインと重要のどちらが優先度が高いでしょうか? セレクタ
継承可能なプロパティコードをコピー コードは次のとおりです。方位角、境界線の折りたたみ、境界線の間隔、 キャプション側、色、カーソル、方向、高度、 空のセル、フォント ファミリ、フォント サイズ、フォント スタイル、 フォントバリアント、フォントウェイト、フォント、文字間隔、 行の高さ、リストスタイルの画像、リストスタイルの位置、 リスト スタイル タイプ、リスト スタイル、孤立、ピッチ範囲、 ピッチ、引用符、豊かさ、ヘッダーの読み上げ、数字の読み上げ、 話す-句読点、話す、発話速度、 ストレス、テキストの配置、テキストのインデント、テキストの変換、 可視性、音声ファミリー、音量、空白、 未亡人、単語間隔 優先順位の4つの原則原則1 :不特定の才能を受け継ぐ デモ1: コードをコピー コードは次のとおりです。<スタイル タイプ="text/css"> *{フォントサイズ:20px} .class3{ フォントサイズ: 12px; } </style> </p> <p><span class="class3">フォント サイズはどれくらいですか? </span> <!-- 実行結果: .class3{ font-size: 12px; }--> デモ2: コードをコピー コードは次のとおりです。<スタイル タイプ="text/css"> #id1 #id2{フォントサイズ:20px} .class3{フォントサイズ:12px} </スタイル> </p> <p><div id="id1" class="class1"> <p id="id2" class="class2"> <span id="id3" class="class3">フォント サイズはどれくらいですか? </span> </p> </div> <!--実行結果: .class3{ font-size: 12px; }--> 原則 2: #ID > .class > タグ デモ1: コードをコピー コードは次のとおりです。<スタイル タイプ="text/css"> #id3 { フォントサイズ: 25px; } .class3{ フォントサイズ: 18px; } スパン{フォントサイズ:12px} </style> </p> <p><span id="id3" class="class3">フォント サイズはどれくらいですか? </span> <!--実行結果: #id3 { font-size: 25px; }--> 原則3:より具体的であるほど良い デモ1: コードをコピー コードは次のとおりです。<スタイル タイプ="text/css"> .class1 .class2 .class3{フォントサイズ: 25px;} .class2 .class3{フォントサイズ:18px} .class3 { フォントサイズ: 12px; } </スタイル> </p> <p><div class="class1"> <p class="class2"> <span class="class3">フォントサイズはどれくらいですか? </span> </p> </div> <!--実行結果: .class1 .class2 .class3{font-size: 25px;}--> 原則4:タグ#ID > タグ.クラス デモ1: コードをコピー コードは次のとおりです。<スタイル タイプ="text/css"> span#id3{フォントサイズ:18px} #id3{フォントサイズ:12px} span.class3{フォントサイズ:18px} .class3{フォントサイズ:12px} </style></p> <p><span id="id3">フォント サイズはどれくらいですか? </span> <span class="class3">フォントサイズはどれくらいですか? </span> <!--実行結果: span#id3{font-size:18px} | span.class3{font-size:18px}--> 最後に:原則が矛盾する場合、原則1 > 原則2 > 原則3 > 原則4 !重要IE6 は !important を認識しますか? ? ? 回答: はい、ただし小さなバグがあります。 例えば: コードをコピー コードは次のとおりです。<スタイル> #ida {サイズ:18px} .classb { フォントサイズ: 12px; } </style></p> <p><div id="ida" class="classb">!重要なテスト: 18px</div> 参加する!重要 コードをコピー コードは次のとおりです。<スタイル> #ida{フォントサイズ:18px} .classb{ フォントサイズ: 12px !重要; } </style></p> <p><div id="ida" class="classb">!重要なテスト: 12px</div> IE6 バグ: コードをコピー コードは次のとおりです。<スタイル> .classb{ フォントサイズ: 18px !重要; フォントサイズ: 12px } </style></p> <p><div class="classA">!重要なテスト: 12px</div> 理由と解決策: ここで、テキストは IE6 では 12 ピクセルですが、他のブラウザでは 18 ピクセルです。 しかし、スタイルを変更して最後に !important を追加すると、つまり .classb{ font-size: 12px;font-size: 18px !important; } とすると、IE6 でも他のブラウザと同様に 18px フォントが表示されます。 |
<<: Nginx ソースコードのコンパイルとインストールのプロセス記録
>>: CSS 疑似要素と疑似クラスの魔法のような使い方についての簡単な説明
1. 絶対位置とマージンを使用するこの方法の原則は、左側と右側をドキュメントの流れから外れるように配...
ミックスインは、コンポーネントに分散された再利用可能な機能を柔軟な方法で提供します。 Mixin オ...
この記事では、従業員管理登録ページを実装するためのjQueryの具体的なコードを例として紹介します。...
コードはさらに合理化できますが、時間の制約があるため、まずはここで投稿して、自分で最適化してメニュー...
1.html部分コードをコピーコードは次のとおりです。 <!DOCTYPE html> ...
目次1.Nuxtサーバーサイドレンダリングアプリケーションの展開(SSRサーバーレンダリング)利点:...
原則: まず入力要素を非表示にし、次に CSS を使用してラベル要素のスタイルを設定します (他の要...
1. Dockerのインストールと起動 yum で epel-release をインストールします ...
今日は何もすることがなかったので、いくつかのツール(オンラインとクライアント)、よく使用する URL...
仮想環境で pip 経由でインストールしてみてください: pip で mysqlclient をイン...
Web Skills第5号では、CSSでダークモードやハイライトモードを実装するための技術的なソリュ...
背景VirtualBox 仮想マシン (Ubuntu 16.04 システムがロードされている) には...
Linux へのリモート デスクトップ接続といえば、まず VNC の使用を思い浮かべるかもしれません...
序文動的プロキシの原理を説明する前に、まず、mybatis を統合した後の dao 層の 2 つの実...
MySQL Workbench - モデリングおよび設計ツール1. モデルは、最も効果的で高性能なデ...