css3小孩特異性

這兩個怎麼沒有出現相同？第一個顯示一個綠色的行，而第二個不顯示。唯一的區別在於html c此外，第n個子選擇器的特殊性是什麼？css3小孩特異性

<!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>

航班嗎

<!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

關於特異性，請參見[規格]（http://www.w3.org/TR/selectors/#specificity）; 'nth-child'是一個僞類，所以要適當地進行特殊性計算。 – Phrogz

tr.c（no space）`是類c的錶行。

tr .c（帶空格）是一個表格行，後面跟着一些其他未指定的類別c標籤。

該空間意味着父母/子女關係。由於你有c類ON tr標記本身，所以tr下面沒有任何子類，它具有c類。

來源

2012-05-01 04:59:15

第二個是一個完全不同的選擇器。 tr .c用空格在中間尋找具有類別名稱「c」的元素，該元素具有祖先<tr>元素。第一個tr.c尋找具有類名「c」的<tr>元素。

這與特異性無關，而是您對CSS的理解。

來源

2012-05-01 04:58:45 animuson

哇，你是對的。尷尬...>。> –

-1

請考慮使用：nth-child（odd）來代替，也請注意IE根本不喜歡它。

來源

2012-05-01 05:02:29

'：n-child（odd）'和'：n-child（2n + 1）'沒有區別。 – BoltClock

css3小孩特異性

回答

相關問題