ホームページ  >  記事  >  ウェブフロントエンド  >  CSSセレクターの優先順位は何ですか?

CSSセレクターの優先順位は何ですか?

青灯夜游
青灯夜游オリジナル
2018-09-20 17:46:336682ブラウズ

ページを作成するときに、追加したスタイルで与えたい要素が明確に選択されているのに、そのスタイルが有効にならないのはなぜですか?定義された属性が競合する場合、ブラウザはどのスタイルのセットを使用することを選択しますか?この章では、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 サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。