嵌套表格中的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優先級

回答

相關問題