2

この例で最初のルールが 2 番目ではなく採用される理由を説明してもらえますか? 私の CSS の特異性の知識によると、2 番目はより具体的であり、使用する必要があります。ただし、すべてのブラウザが最初に使用します。

例:

http://apblog.lv/misc/css_spec/example2.html

CSS:

table.data .negative {
  /* css specificity: 0,0,2,1 */
  color: red;
}
table.data tr.inactive td {
  /* css specificity: 0,0,2,3 */
  color: gray; /* this should be used */
}

HTML:

<table class="data">
  <tr class="inactive">
    <td><span class="negative">should be gray</span></td>
  </tr>
</table>
4

8 に答える 8

11

あなた<span class="negative">は最も内側の要素であり、スタイルを示すものでもあります。色<td>の設定が異なる場合があります。範囲外にテキストを追加すると、灰色になります。

于 2009-02-11T08:32:04.563 に答える
3

より特異性の高いルールは、SPAN ではなく TD を対象としているため、すべての賭けは無効です。折り畳むタイミングを知っておく必要があります。:-)


編集

ここで言及されている概念が表示されていないとコメントで述べています。 http://www.w3.org/TR/CSS21/cascade.html#cascade

...それは本当だ。ここにいくつかの段落があります。 http://www.w3.org/TR/CSS21/cascade.html#inheritance

どの州、

「...[子要素]に色が割り当てられていない場合、[子要素]は親要素の色を継承します...継承が発生すると、要素は計算値を継承します。親要素からの計算値は次のようになります。子の指定された値と計算された値の両方」

あなたの例では、CSS ルールが color プロパティの SPAN 要素を直接対象としているため、継承の原則は適用されません。

于 2009-02-11T15:24:24.040 に答える
0

各ルールの特異度は正しく計算されており、2 番目のルールの特異度は最初のルールの特異度よりも高い値になっています。しかし、特異性は「同じ重要性と起源を持つルールを並べ替える...」ためにのみ使用されます ( http://www.w3.org/TR/CSS21/cascade.html#cascading-order ) 言い換えれば、特異性は引き分けですブレーカーであり、この場合、ブレークするタイはありません。

于 2009-02-11T15:28:37.900 に答える
0

スパンは td 内にあるため、最初のセレクターは実際にはより具体的です。

于 2009-02-11T08:34:25.307 に答える
0

クラスが期待どおりに機能しない理由は、CSS ではなく HTML でクラスを定義する方法が原因です。お気付きのように、inactiveクラスはそれを含む要素に設定され、クラス「ネガティブ」<tr>によってオーバーライドされます。<span>色スタイルを何よりも適用したい場合はinactive、色の定義の後に !important を追加します。

 table.data tr.inactive td {
      /* css specificity: 0,0,2,3 */
      color: gray !important; /* this should be used */
 }

negativeこれは、スタイルに関係なくオーバーライドされます。

于 2009-02-11T08:34:33.247 に答える
0

table.data tr.inactive tdより具体的に見えるかもしれませんが、実際table.data .negativeには、一般的な要素ではなく、要素のクラスを呼び出しているためです。td

于 2009-02-11T08:36:08.203 に答える
0

これは CSS の優先度とは直接関係ありません。両方のルールが適用され、td には非アクティブ、span には負ですが、span 要素は html structore (DOM) の td 要素の「上」にあるため、td をオーバーライドします。スパンの外側にテキストを追加すると、両方のルールが使用されていることがわかります。

于 2009-02-11T08:47:55.490 に答える