CSSの詳細度

1. *.cdvSample410 { text-decoration: line-through; }
2. .cdvSample410 { text-decoration: underline; }

先の宣言には全称セレクタ[*(アスタリスク)]があるが、詳細度に影響を与えないので最後に宣言されたものが適用されます。

1. .cdvSample420 span { text-decoration: line-through; }
2. span.csnSample420 { text-decoration: underline; }

先の宣言には子孫結合子[' '(空白)]があるが、詳細度に影響を与えないので最後に宣言されたものが適用されます。

1. .cdvSample430 > span { text-decoration: line-through; }
2. .cdvSample430 span { text-decoration: underline; }

先の宣言には子結合子[>(大なり)]があるが、詳細度に影響を与えないので最後に宣言されたものが適用されます。

1. .cdvSample440 * ~ span { text-decoration: line-through; }
2. .cdvSample440 span { text-decoration: underline; }

先の宣言には一般兄弟結合子[~(チルダ)]があるが、詳細度に影響を与えないので最後に宣言されたものが適用されます。

1. .cdvSample450 * + span { text-decoration: line-through; }
2. .cdvSample450 span { text-decoration: underline; }

先の宣言には隣接兄弟結合子[+(プラス)]があるが、詳細度に影響を与えないので最後に宣言されたものが適用されます。

1. .cdvSample460 :not(div) { text-decoration: line-through; }
2. .cdvSample460 span { text-decoration: underline; }

先の宣言には否定擬似クラス[not]があるが、詳細度に影響を与えないので最後に宣言されたものが適用されます。

1. cdvSample472 span { text-decoration: line-through; }

1. <link rel="stylesheet" href="./specificity.css">
2. <style>
3. .cdvSample472 span { text-decoration: underline; }
4. </style>

セレクタは同じで、link要素, style要素という記述場所の違いとHTMLでの記述順序が違います。
link要素, style要素という記述場所は詳細度に影響を与えないので最後に宣言されたものが適用されます。

1. div.cdvSample510 { text-decoration: line-through; }
2. .cdvSample510 { text-decoration: underline; }

先の宣言には要素型セレクタがあり、詳細度に影響を与えるので（後のセレクタよりその分が重いので）この宣言が適用されます。

1. .cdvSample521::before { content: "疑似要素"; }
2. .cdvSample521 { color: #0000ff; }

先の宣言には疑似要素があります。
::before は選択した要素の最初の子要素として擬似要素を作成します。

1. .cdvSample522::before { color: #ff0000; content: "疑似要素"; }
2. .cdvSample522 { color: #0000ff; }

::beforeの宣言にcolor プロパティを指定しています。
疑似要素に宣言しているのはこの記述なのでこの宣言が適用されます。
詳細度の知識として、疑似要素は要素型セレクタと同じ重さであると覚えて頂ければと思います。

1. .cdvSample523::before { color: #ff0000; content: "疑似要素"; }
2. .cdvSample523 { color: #0000ff!important; }

試しに後の宣言に詳細度の重い !important を指定してみました。しかし疑似要素に宣言している訳ではないので疑似要素で宣言されている値が適用されます。

1. .cdvSample610 .csnSample610 { text-decoration: line-through; }
2. .cdvSample610 span { text-decoration: underline; }

先の宣言にはクラスセレクタがあり、詳細度に影響を与えるので（後の要素型セレクタより重いので）この宣言が適用されます。

1. .cdvSample621 [class="csnSample620"] { text-decoration: line-through; }
2. .cdvSample621 span { text-decoration: underline; }

先の宣言には属性セレクタがあり、詳細度に影響を与えるので（後の要素型セレクタより重いので）この宣言が適用されます。

1. .cdvSample622 [class="csnSample620"] { text-decoration: line-through; }
2. .cdvSample622 .csnSample620 { text-decoration: underline; }

先の宣言には属性セレクタがあり後の宣言にはクラスセレクタがあり、ともに詳細度が同じなので最後に宣言されたものが適用されます。

1. .cdvSample623 .csnSample620 { text-decoration: underline; }
2. .cdvSample623 [class="csnSample620"] { text-decoration: line-through; }

先の宣言にはクラスセレクタがあり後の宣言には属性セレクタがあり、ともに詳細度が同じなので最後に宣言されたものが適用されます。

1. .cdvSample631 *:first-child { text-decoration: line-through; }
2. .cdvSample631 span { text-decoration: underline; }

先の宣言には疑似クラスがあり、詳細度に影響を与えるので（後の要素型セレクタより重いので）この宣言が適用されます。

1. .cdvSample632 *:first-child { text-decoration: line-through; }
2. .cdvSample632 .csnSample630 { text-decoration: underline; }

先の宣言には疑似クラスがあり後の宣言にはクラスセレクタがあり、ともに詳細度が同じなので最後に宣言されたものが適用されます。

1. .cdvSample633 .csnSample630 { text-decoration: underline; }
2. .cdvSample633 *:first-child { text-decoration: line-through; }

先の宣言にはクラスセレクタがあり後の宣言には疑似クラスがあり、ともに詳細度が同じなので最後に宣言されたものが適用されます。

1. .cdvSample710 #isnSample710 { text-decoration: line-through; }
2. .cdvSample710 .csnSample710 { text-decoration: underline; }

先の宣言にはＩＤセレクタがあり、詳細度に影響を与えるので（後のクラスセレクタより重いので）この宣言が適用されます。

1. <style>
2. .cdvSample810 #isnSample810 { text-decoration: line-through; }
3. </style>
4. <div class="cdvSample810">
5. <span id="isnSample810" style=" text-decoration: underline; ">テキスト</span>
6. </div>

style属性を用いて宣言を記述しています。style要素でのセレクタを用いた宣言にはＩＤセレクタがありますが、詳細度はインライン (style属性で記述)の方が重くてこの宣言が適用されます。

1. <style>
2. .cdvSample910 * { text-decoration: line-through!important; }
3. </style>
4. <div class="cdvSample910">
5. <span style=" text-decoration: underline; ">テキスト</span>
6. </div>

宣言で important キーワードを記述しています。インライン (style属性で記述)より詳細度が重くなる為、この宣言が適用されます。