CSS特異性は、私はこれらの宣言ブロックに対する特異性スコアを計算するにはどうすればよい

Question

スコアの決定：

body div main section div ul li p strong span a {}

特異= 1 * 11 = 11

と、

.someClass {}

を特異性= 10 * 1 = 10

だから、最初の勝利は？

Answer 1

W3C specification状態：

次のようにセレクタの特異性が計算される。

• セレクタにIDセレクタの数を数える（= A）
• はクラスセレクタの数をカウントし、 （= b）
• セレクタ（= c）の型セレクタと疑似要素の数を数えます
• が否定擬似クラス内部

セレクタは、他と同様にカウントされるユニバーサルセレクタを無視 しかし否定自体は、擬似クラスとしてカウントされません。

例：3つの数字（大塩基と数システムにおける）A-B-Cを連結

*    /* a=0 b=0 c=0 -> specificity = 0 */ 
LI    /* a=0 b=0 c=1 -> specificity = 1 */ 
UL LI   /* a=0 b=0 c=2 -> specificity = 2 */ 
UL OL+LI  /* a=0 b=0 c=3 -> specificity = 3 */ 
H1 + *[REL=up] /* a=0 b=1 c=1 -> specificity = 11 */ 
UL OL LI.red /* a=0 b=1 c=3 -> specificity = 13 */ 
LI.red.level /* a=0 b=2 c=1 -> specificity = 21 */ 
\#x34y   /* a=1 b=0 c=0 -> specificity = 100 */ 
\#s12:not(FOO) /* a=1 b=0 c=1 -> specificity = 101 */ 

は特異性を与えます。

---

今、私はそれが実際にどのように実装されるか、それを明確にしようとします。つまり10個のHTMLSタグ等しくない1つのクラスを行い、それがよりこのように書きます：

id : class : tag : pseudo-elements

---

まず例：

body div main section div ul li p strong span a {} 

特異性：0 : 0 : 11 : 0

第二の例：

.someClass {} 

特異性：0 : 1 : 0 : 0

11要素は1つのクラスでは勝てません。高い階層は常に勝つので、1000以上のクラスでもidを打ち負かすことはありません（idのスタイルはとにかく悪い練習です）。

---

カスケードを忘れないでください。後でソースファイルで宣言された同じ特異性を持つスタイルは、競合が発生した場合に勝ちます。インラインスタイルは、!importantを除いて常に何かで勝ちます。