CSSセレクタの特殊性、優先順位

特殊性とは何か

1つのHTML要素にCSSスタイルを適用する場合、要素を見つけるには、次のような方法がよくあります.

HTML要素を1つにする方法は、これだけではありません.では、同じスタイルが1つの要素に多く適用されている場合、最終的にはどのスタイルに明示されますか?CSSは複数のセレクタの優先度に対して特殊性という方式を用いた.

CSS特殊性

セレクタの特殊性は4つのレベルに分けられ,a b c d,左から右,左ほど優先され,1つのセレクタ規則に同じタイプのセレクタが複数ある場合+1となる.

HTML内スタイルであれば特殊性が最優先、a=1

idセレクタの特殊性はb、

クラスセレクタ、擬似クラスセレクタ、属性セレクタがc

ラベルセレクタ、ダミーエレメントセレクタd

まず、セレクタのタイプについて説明します。

idセレクタ#myid { ... }クラスセレクタ.myclass { ... }ラベルセレクタp { ... }属性セレクタ[title="mytitle"] { ... }W 3 CSCHOOLのような多くの文書は詳細に説明されていない可能性があるため、属性セレクタは、このようなdiv[title="mytitle"]または#id[title="mytitle"]などであると考える人も少なくないかもしれないが、これは属性セレクタであり、厳密には、単純な属性セレクタではなく、idセレクタ、ラベルセレクタなどと属性選択とが共通して構成されている.
ダミーセレクタp:hover { ... }一般的なダミーセレクタは、リンクダミー、:link、:visited、アンカー要素に使用されます.動的擬似クラス、:hover、:focus、:active、任意選択に使用します.
擬似要素セレクタ

p::after { ... }
p::before { ... }

擬似要素と擬似クラスは全く異なる概念であり、擬似要素と呼ばれるのは、仮想HTML要素を生成することができるためであるが、擬似要素はDOMによって取得できないだけである.擬似要素の応用は多く、最も一般的な例は::afterフローティングのクリア:

    
A
    
B

CSS特殊性の例

以下に、いくつかのCSSセレクタの特殊な例を示します.
セレクタ
とくしゅせい
10を基数とする特殊性style="color: red"
1, 0, 0, 0
1000 #id {}
0, 1, 0, 0
100 #id #aid
0, 2, 0, 0
200 .sty {}
0, 0, 1, 0
10 .sty p[title=""] {}
0, 0, 2, 0
20 p:hover {}
0, 0, 1, 0
10 p {}
0, 0, 0, 1
1 ul::after {}
0, 0, 0, 1
1 div p {}
0, 0, 0, 2
2
2つのルールの特殊性が同じ場合、後に定義されたものは先に定義されたものを上書きします.

CSS重要性

CSSにはもう1つ特殊性を無視できるものがあります.それは!importantで、このマークを使うCSS属性が常に最優先です.

#id { color: red }
.class { color: yellow !important }

2番目のスタイルは、idセレクタの特殊性がクラスセレクタよりも高い場合でも、1番目のスタイルよりも優先されます.
両方の属性がある場合!important特殊性によって優先度が決定されます.

#id { color: red ！important }
.class { color: yellow !important }

結果は、最初のスタイルが2番目のスタイルよりも優先されます.
IE 6対!importantのサポートは不完全であり、IE 6において、一つのセレクタにおいて先に定義されている!important属性が、後に同じでない!importantの属性が定義されている場合、!importantは無効となる.

div {
  color: yellow !important;  
  color: red;
}

IE 6では、黄色になることはできませんが、やはり血を見ましょう.
IE 6/7は!important後ろに材料を入れても味は失われませんが、そんなに退屈しないことをお勧めします!

div {
  color: yellow !important you are dead;   /* IE6/7     */
}