7

次の点を考慮してください。

<td class="datepickerDisabled"><a href="#"><span>12</span></a></td>

私の CSS には、このセレクターに一致する 2 つのルールがあります。

tbody.datepickerDays td:hover {
  border-radius: 2px;
  -moz-border-radius: 2px;
  -webkit-border-radius: 2px;
  background-color: #ddd;
}

2 つ目は次のとおりです。

td.datepickerDisabled:hover {
  background-color: white;
}

background-colorに設定するための 2 番目のルールwhiteは一致しません。以前のルールはより具体的であるため（ class のセル）、それをオーバーライドするルールになると思いますdatepickerDisabled。

4

1 に答える 1

10

「0,0,2,2 対 0,0,2,1。最初のほうが明らかに勝ちます。」

tbody           Element      d
.datepickerDays Class        c
td              Element      d
:hover          Pseudo-class c
                              = 0,0,2,2

td                  Element      d
.datepickerDisabled Class        c
:hover              Pseudo-class c
                              = 0,0,2,1

この形式を理解していない場合は、 http://www.w3.org/TR/CSS21/cascade.html#specificity をお読みください:

セレクターの特異性は次のように計算されます。

  • 宣言がセレクタ付きのルールではなく 'style' 属性である場合は 1、それ以外の場合は 0 (= a) (HTML では、要素の「スタイル」属性の値はスタイル シートのルールです。これらのルールにはセレクタがありません。つまり、a=1、b=0、c=0、d=0 です。)
  • セレクター内の ID 属性の数をカウントする (= b)
  • セレクター内の他の属性と疑似クラスの数をカウントします (= c)
  • セレクター内の要素名と疑似要素の数をカウントします (= d)。特異性は、セレクターの形式のみに基づいています。特に、"[id=p33]" という形式のセレクターは、id 属性が "ID " ソース ドキュメントの DTD 内。

4 つの数 abcd を (基数が大きい数体系で) 連結すると、特異性が得られます。

画像ソースをご希望の場合:

于 2012-08-07T14:05:18.513 に答える