ホームページ > 記事 > ウェブフロントエンド > CSSセレクターの優先順位は何ですか?
ページを作成するときに、追加したスタイルで与えたい要素が明確に選択されているのに、そのスタイルが有効にならないのはなぜですか?定義された属性が競合する場合、ブラウザはどのスタイルのセットを使用することを選択しますか?この章では、CSS セレクターの優先順位について説明します。困っている友人は参考にしていただければ幸いです。
1. セレクターの優先順位の並べ替え
1. ! important
属性の後にこのスタイルを記述すると、ページ上の任意の場所で定義されている要素のスタイルがオーバーライドされます。
2. インラインスタイル、style属性に記述されるスタイル。
3. ID セレクター
4. クラス セレクター
5. タグ セレクター
6. ワイルドカード セレクター
7. ブラウザーのカスタム属性と継承
上記のソート順は優先順位/重みです。サイズの順番を比較してみてください。
2. 複雑なセレクターの優先順位、さまざまな状況における子孫セレクターの優先順位。
スタイルを記述するとき、複数の子孫スタイルを使用することがあります。その場合、優先順位は何でしょうか?いくつかの例を見てみましょう。
1. id が多い方が優先されます
#box .head span{ color:blue; } .box .head span{ color:red; }<br data-filtered="filtered">//下面span标签的颜色是蓝色的 <div class="box" id="box"> <div class="head"> <span>我的颜色</span> </div> </div>
2. id と class の数は同じで、要素の数に応じて、数が多いほど優先度が高くなります。 。
//颜色应用的是第一个的样式,粉色<br data-filtered="filtered">#box .head p span{ color:deeppink; } #box .head span{ color:blue; } #box .head span{ color:red; } <div class="box" id="box"> <div class="head"> <p class="p"><span>我的颜色</span></p> </div> </div>
3. 優先順位は同じで、後のスタイルは、セレクターのタイプと番号のみを順不同で前のスタイルを上書きします。
rreeee以上がCSSセレクターの優先順位は何ですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。