嵌套表格中的CSS优先级

我一直在改进将XML转换为HTML的代码。有一个生成表的递归方法。嵌套表格中的CSS优先级

我希望每个级别都有不同的颜色。所以我设置了三个层次的风格，如果递归更深（层次％3），我会重复它们。

但似乎父表格样式获得优先，因为第四级别与其父级具有相同的颜色。我可以解决这个问题吗？

<html> 
<head><style> 
    table { border-collapse: collapse; } 
    table, th, td { border: 1px solid black; } 
    th, td { padding: 10px; } 
    table.level_1 td { border-color: green; } 
    table.level_2 td { border-color: blue; } 
    table.level_3 td { border-color: red; } 
</style></head> 
<body> 
    <table class='rule level_1'> 
    <tr class="all"> 
     <td>XX</td> 
     <td> 
      <table class='rule level_2'> 
      <tr class="all"> 
       <td>YY</td> 
       <td> 
        <table class='rule level_3'> 
        <tr class="all"> 
         <td>ZZ</td> 
         <td> 
          <table class='rule level_1'> 
          <tr class="all"> 
           <td>ZZ</td> 
          </tr> 
          </table> 
         </td> 
        </tr> 
        </table> 
       </td> 
      </tr> 
      </table> 
     </td> 
    </tr> 
    </table> 
</body> 
</html>

来源

2017-04-05 Leos Literak

可以使样式采用直接孩子选择具体到实际td S：

table.level_1 > tbody > tr > td { border-color: green; } 
table.level_2 > tbody > tr > td { border-color: blue; } 
table.level_3 > tbody > tr > td { border-color: red; }

Updated bin

来源

2017-04-05 09:32:03 Pete

谢谢，一旦允许，我会在7分钟内接受答案。 –

不客气，很高兴帮助:) – Pete

-2

使用CSS括号像儿童关系

table > table > td 
{ 
border-collapse: collapse; 
}

这种方式CSS属性将只适用于其子元素不是兄弟姐妹。

来源

2017-04-05 09:32:18

嵌套表格中的CSS优先级

回答

相关问题