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. 優先順位は同じで、後のスタイルは、セレクターのタイプと番号のみを順不同で前のスタイルを上書きします。

以上がCSSセレクターの優先順位は何ですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。