表内悬停的HTML表格不能正常工作

Question

我有儿童表格内tr表我不想应用悬停和斑马srtip，下面是我的代码不工作，子表显示悬停和斑马条

<table class='zebrastrip'> 
    <tr> 
    <td>1</td> 
    <td>2</td> 
    </tr> 
    <tr> 
    <td>3</td> 
    <td>4</td> 
    </tr> 
    <tr> 
     <table class='atable'> 
     <tr> 
      <td>5</td> 
      <td>6</td> 
     </tr> 
     <tr> 
      <td>7</td> 
      <td>8</td> 
     </tr> 
     </table> 
    </tr> 
</table> 

    .atable tr:nth-child(2n-1){ 
     background-color:#FFFFFF; 
    } 
    .atable tr:hover{ 
    background-color:#FFFFFF; 
    } 
    .zebrastrip tr:nth-child(2n-1){ 
     background-color:#f9f9f9; 
    } 
    .zebrastrip tr:hover{ 
     background-color:#fce4cc; 
    } 

由于

Answer 1

拨弄的固定码：http://jsfiddle.net/r3eAn/

固定HTML：

<table class='zebrastrip'> 
    <tr> 
    <td>1</td> 
    <td>2</td> 
    </tr> 
    <tr> 
    <td>3</td> 
    <td>4</td> 
    </tr> 
    <tr> 
     <td colspan="2"> 
      <table class='atable'> 
      <tr> 
       <td>5</td> 
       <td>6</td> 
      </tr> 
      <tr> 
       <td>7</td> 
       <td>8</td> 
      </tr> 
      </table> 
     </td> 
    </tr> 
</table> 

固定CSS有内表的背景始终#FFF：

更高的优先级为内部的表格样式

背景内表的定义

.zebrastrip tr:nth-child(2n-1){ 
    background-color:#f9f9f9; 
} 
.zebrastrip tr:hover{ 
    background-color:#fce4cc; 
} 
.zebrastrip .atable{ 
    background: #FFFFFF; 
} 
.zebrastrip .atable tr:nth-child(2n-1){ 
    background-color:#FFFFFF; 
} 
.zebrastrip .atable tr:hover{ 
    background-color:#FFFFFF; 
}