10個のタグで特異性の式が機能しないのはなぜですか？

the specificationによれば、第2のルールはより特異性が高く、テキストは青色でなければならないが、赤色でなければならない。10個のタグで特異性の式が機能しないのはなぜですか？

/** specificity = 10 */ 
 
.my{ 
 
    background-color: red; 
 
} 
 

 
/** specificity = 12 */ 
 
html body div b i strong em span font strike ul li{ 
 
     background-color: blue; 
 
}

<html> 
 
<body> 
 
<div> 
 
<b><i><strong><em><span><font><strike><ul><li class="my">SUPER</li></ul></strike></font></span></em></strong></i></b> 
 
</div> 
 
</body> 
 
</html>

出典

2016-10-17 Iaroslav Baranov

'0,0,1,0は、' 10 –

特異性は、マトリックスのより** **ポイントシステムは、あなたが追加することができないされていないため、

。 Web開発者の早い段階で私はこの同じ誤りを犯しました。セレクタは4つのカテゴリに収まり、右から左へ移動する人に与える重みが高くなります。その数の合計が「0」、すなわち「0,1,0,0」>「0,0,150,0」でない限り、合計の合計は左の合計を上回らない。 – hungerstar

は、CSSのテクニックから、これらの規則を参照してください：各クラス値（または擬似クラスまたは属性セレクタ）については

、適用されます0,0,1,0ポイント

各要素のリファレンスについては、したがって、あなたの最初の例は、0,0,1,0のポイントを持って0,0,0,1ポイント

https://css-tricks.com/specifics-on-css-specificity/

を適用します。あなたの秒は0,0,0,12ポイントです。 > 0,0,0,12

0,0,1,0基本的に、あなたがIDを持っているか、いない場合は、あなたのセレクタで参照しているどのように多くの要素は関係ありません。あなたのクラスセレクタを参照するクラスは常にになります。です。

CSS Tricks

出典

2016-10-17 14:03:16 Curt

ルールは同じ階層のセレクタを有している場合は、2番目のルールは、より特異のみを有しています。より具体的なクラスをお持ちの場合、それが引き継がれます。

あなたはli.myを使用することができます。

/** specificity = 10 */ 
 
.my{ 
 
    background-color: red; 
 
} 
 

 
/** specificity = 12 */ 
 
html body div b i strong em span font strike ul li.my { 
 
     background-color: blue; 
 
}

<html> 
 
<body> 
 
<div> 
 
<b><i><strong><em><span><font><strike><ul><li class="my">SUPER</li></ul></strike></font></span></em></strong></i></b> 
 
</div> 
 
</body> 
 
</html>

出典

2016-10-17 14:03:06 Dekel

10個のタグで特異性の式が機能しないのはなぜですか？

答えて

関連する問題