この記事は、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 疑似要素と疑似クラスの魔法のような使い方についての簡単な説明
この記事の目的は、最も明確な構造を使用していくつかのコンポーネントの基本機能を実装することです。皆さ...
フロントエンド開発者としては、IEの落とし穴は避けて通れません。他のブラウザはいいのにIEは壊れてい...
目次バイナリ検索木 (BST) とは何ですか?バイナリツリーの基本的な走査(インオーダー、ポストオー...
この記事では、React Native の基本をすでに理解していることを前提とし、ネイティブと Ja...
1. 堂々巡りいろいろ試行錯誤した結果、均等割り付けレイアウトを実現する最も簡単な方法は CSS ...
この記事では、例を使用して、MySQL インデックスがソートに与える影響を説明します。ご参考までに、...
目次1. Vue3コンポーネント通信方式2. Vue3通信の使い方2.1 小道具2.2 $エミット2...
クエリで EXPLAIN を実行するとデータベースが変更されるかどうかを尋ねられた場合、おそらく「い...
1. 速度制御機能を使用して、トランジション効果(加速、減速など)の速度曲線を制御します。速度制御機...
1. はじめにMySQL グループ レプリケーション (略して MGR) は文字通り MySQL グ...
1. MySQLをダウンロードする公式サイトのダウンロードページをクリックすると次のページに入ります...
Nginx を使用して Tomcat9 クラスターを構築し、Redis を使用してセッション共有を実...
会社の開発者がテスト環境で挿入ステートメントを実行すると、正常に実行されるまでに 10 秒以上かかり...
フロントエンド開発部門は成長し、スタッフも増加し、技術も向上しています。 CSSer はフロントエン...
目次1. 通常どのようなコンテンツを処理する必要があるか2. 基本的な考え方3. 具体的な実践の詳細...