css - 不同风格的表内表？

Question

如何为两个表格的表格单元格制作两种不同的样式，其中一个单元格在另一个表格中？

我有两种 CSS 样式：

table.style1 { /* any styles */}
table.style1 td { /* any styles */}

和

table.style2 { /* any styles */}
table.style2 td { /* any styles */ }

在代码中我有这样的感觉：

<table class="style1">
   <tr>
      <td>
         <table class="style2">
            <tr><td>bla bla<td></tr>
         </table>
      </td>
   <tr>
</table>

结果是 -<td>第二个表格（带有样式2）中的所有表格单元格都带有样式1......！

当我在桌子里面有桌子时，如何制作两个不同的css stile？

Answer 1

试试这个代码。我确信它工作正常。

table.style1 { /* any styles */}

table.style1 td { /* any styles */}

和

table.style1 table.style2 { /* any styles */}

table.style1 table.style2 td { /* any styles */}

Answer 2

这是选择不同表格单元格的一种方法http://jsfiddle.net/HR8Bg/2/

.style1 td {
    background: blue;
    color: #fff;
}

.style1 td td {
    background: red;
}

Answer 3

您可以按照以下代码

对于表 1

table .style1 { /* 任何样式 */}

table .style1 td { /* 任何样式 */}

对于表 2

table .style1 .style2 { /* 任何样式 */}

table .style1 .style2 td { /* 任何样式 */}