9

私は互いに続く2つのCSSルールを持っています：

.some td:first-child:before {
    content:url('path/to/image.png')" " ;
}
.some .other:before {
    content:url('path/to/image2.png')" " ;
}

HTMLスニペットは次のとおりです。

<table class="some">
<tr>
    <td class="other">Text goes here</td>
    <td>Some more text.</td>
</tr>
</table>

これらは両方とも同じテーブルセルに適用されることになっています。クラスのないものはフォールバックとして意図されています。しかし、何らかの理由で、常に最初のルールを2番目のルールよりも選択しています。Firebugで最初のものを無効にすると使用されるので、2番目のものが機能することを知っています。

ここで何が欠けていますか？

4

3 に答える 3

15

わかりました、これをまっすぐに言うと、いくつか 読んだ後、これは特異性です：

  • Id：100
  • クラス：10
  • 疑似クラス：10
  • 疑似要素：1
  • 要素：1

そのため、最初のセレクターの特異性は22になり、2番目のセレクターの特異性は21になります。どうやらfirst-child、疑似要素ではなく、疑似クラスのようです。

td最後に、 beforeを追加すると.other、ドキュメントの順序が優先されるため、トリックが実行されます。

于 2012-04-07T16:44:00.857 に答える
3

最初のルールは2番目のルールよりも具体的であるため、両方のセレクターが有効な場合、より具体的なルールが他方をオーバーライドします。

この記事を読んで、スタイルが競合するというこのような複雑さをどのように克服できるかを理解してください。それらを簡単に説明すると、特異性の計算方法は次のとおりです。

+--------------------+--------------------+-----------------------------------+
|    Type            |   Specific Value   |  Example                          |
+--------------------+--------------------+-----------------------------------+
|  Inline Style      |   1000             | style="color: #f00;"              |
+--------------------+--------------------+-----------------------------------+
|  Id                |   100              | #text { color: #f00; }            |
+--------------------+--------------------+-----------------------------------+
|  Classes           |   10               | .text { color: #f00; }            |
+--------------------+--------------------+-----------------------------------+
|  Pseudo Classes    |   10               | a:hover { color: #f00; }          |
+--------------------+--------------------+-----------------------------------+
|  Pseudo Elements   |   10               | a:first-child { color: #f00; }    |
+--------------------+--------------------+-----------------------------------+
|  Elements (tag)    |   1                | a { color: #f00; }                |
+--------------------+--------------------+-----------------------------------+

基本的に、クラスセレクターはタグセレクターよりも具体的です。あなたの特異性を計算しましょう

  • 最初のルールの場合：31
  • 2番目のルールの場合：30

したがって、最初のルールが優先されます。

次のように2番目のルールの特異性を高めることができます

.some tr td.other:before {
    content:url('path/to/image2.png') ;
}

スタイルの最初のルールをオーバーライドするために、33に計算されます。

于 2012-04-07T16:11:46.737 に答える
2

私はそれが特異性と関係があるとかなり確信しています。!important2番目のルールに追加してみて、それが機能するかどうかを確認してください。

于 2012-04-07T16:05:56.407 に答える