css3 nth-childの特異性

どのようにこれらの2つが同等にならないのですか？最初の行は緑色の行を示し、2番目の行は緑色の行を示しています。唯一の違いはhtml cです。さらに、nth-childセレクタの特異性は何ですか？css3 nth-childの特異性

<!DOCTYPE html> 
<html> 
    <head> 
     <title>Stripe Test</title> 
     <style type='text/css'> 
      tr:nth-child(2n+1) 
      { 
       background-color: red; 
      } 
      tr.c 
      { 
       background-color: green; 
      } 
     </style> 
    </head> 
    <body> 
     <table class='stripe'> 
      <tr class='c'> 
       <td>one</td> 
      </tr> 
      <tr> 
       <td>two</td> 
      </tr> 
      <tr> 
       <td>three</td> 
      </tr> 
     </table> 
    </body> 
</html>

-vs-

<!DOCTYPE html> 
<html> 
    <head> 
     <title>Stripe Test</title> 
     <style type='text/css'> 
      tr:nth-child(2n+1) 
      { 
       background-color: red; 
      } 
      tr .c 
      { 
       background-color: green; 
      } 
     </style> 
    </head> 
    <body> 
     <table class='stripe'> 
      <tr class='c'> 
       <td>one</td> 
      </tr> 
      <tr> 
       <td>two</td> 
      </tr> 
      <tr> 
       <td>three</td> 
      </tr> 
     </table> 
    </body> 
</html>

出典

2012-05-01 John K

特異性に関しては、[the specs]（http://www.w3.org/TR/selectors/#specificity）を参照のこと。 'nth-child'は疑似クラスなので、特異度計算を適切に行います。 – Phrogz

tr.c（スペースなし） `はクラスcのテーブル行です。

tr .c（スペース付き）は表の行であり、その他の不特定のタグにはクラスcが続きます。

このスペースは、親子関係を意味します。 cクラスはのtrタグそのものなので、trの下にはcクラスの子はありません。

出典

2012-05-01 04:59:15

もう一つは完全に異なるセレクタです。 tr .cの間にスペースを入れて、祖先が<tr>の要素を持つクラス名 "c"の要素を探します。最初のtr.cは、クラス名が "c"の<tr>要素を探します。

これは特異性とは関係なく、CSSを理解しています。

出典

2012-05-01 04:58:45 animuson

あなたは正しいですね。恥ずかしい...>。>。 –

-1

代わりに、nth-child（奇数）を使用することを検討してください。また、IEはそれをまったく気に入らないことに注意してください。

出典

2012-05-01 05:02:29

'：nth-child（odd）'と '：nth-child（2n + 1）'の間に違いはありません。 – BoltClock

答えて

関連する問題