CSS悬停禁用嵌套表

Question

我有一个CSS :hover类的问题。如何禁用第二行中的第二个表:hover类。

这里是fiddle

HTML

<table border="0" width="100%" id="product-table"> 
    <tr> 
    <td colspan="2">Title of the table</td> 
    </tr> 
    <tr> 
    <td width="20%"><b>Text text</b></td> 
    <td>someting about product</td> 
    </tr> 
    <tr> 
    <td><b>text text</b></td> 
    <td> 
     <table border="0" width="100%"> 
     <thead> 
      <tr bgcolor="#ddd"> 
       <td colspan="6"><strong>Title of inside</strong></td> 
      </tr> 
      <tr bgcolor="#efefef"> 
       <td width="20%"><strong>No</strong></td> 
       <td width="20%"><strong>Date</strong></td> 
       <td width="20%"><strong>Define</strong></td> 
      </tr> 
     </thead> 
     <tbody id="hat_ekle"> 
      <tr> 
       <td>123</td> 
       <td>2013</td> 
       <td>some text</td> 
      </tr> 
      <tr> 
       <td>234</td> 
       <td>2013</td> 
       <td>some text</td> 
      </tr> 
     </tbody> 
     </table> 
    </td> 
    </tr> 
</table> 

CSS

#product-table tr:hover { background:#333; } 

Answer 1

一种方法是使选择更加严格：

#product-table > tbody > tr:hover { background:#333; } 

演示：http://jsfiddle.net/yrZ8R/2/

>表明，只有直接孩子应该相匹配。

参见：

• CSS Selectors Level 3
• Why are we using <tbody> in the selector？