如何使用CSS隱藏除第一個子元素之外的所有子元素

Question

我有一個動態循環的表。 現在我需要隱藏所有<tr>與類.dynamic-tr ，除了第1台的<tr class="dynamic-tr">使用CSS。

<table class="dynamic-table">
  <tr class="dynamic-tr">
    <th>Resource Name</th>
    <th>Allocation</th>
  </tr>
  <tr>
    <td>John</td>
    <td>100%</td>
  </tr>
</table>
<table class="dynamic-table">
  <tr class="dynamic-tr">
    <th>Resource Name</th>
    <th>Allocation</th>
  </tr>
  <tr>
    <td>Alex</td>
    <td>50%</td>
  </tr>
</table>
<table class="dynamic-table">
  <tr class="dynamic-tr">
    <th>Resource Name</th>
    <th>Allocation</th>
  </tr>
  <tr>
    <td>Bryce</td>
    <td>100%</td>
  </tr>
</table>

我已經嘗試過使用這個 CSS 但它不起作用。 有人可以建議。

.dynamic-table .dynamic-tr {
  display: none;
}
.dynamic-table:first-of-type .dynamic-tr {
  display: block;
}

Answer 1

使用:not來實現您的需求。

 table.dynamic-table:not(:first-child) .dynamic-tr { display:none; }

 <table class="dynamic-table"> <tr class="dynamic-tr"> <th>Resource Name</th> <th>Allocation</th> </tr> <tr> <td>John</td> <td>100%</td> </tr> </table> <table class="dynamic-table"> <tr class="dynamic-tr"> <th>Resource Name</th> <th>Allocation</th> </tr> <tr> <td>Alex</td> <td>50%</td> </tr> </table> <table class="dynamic-table"> <tr class="dynamic-tr"> <th>Resource Name</th> <th>Allocation</th> </tr> <tr> <td>Bryce</td> <td>100%</td> </tr> </table>

Answer 2

這是否滿足您的要求？

body > table > tbody > tr.dynamic-tr { display: none; }
body > table:first-of-type > tbody > tr.dynamic-tr {display: inline;}