使 table 的最后一个子元素与其上方的 table 元素颜色相同

Question

我有一个 table，在 css 我正在使用第 nth-child 来使背景颜色不同：

.className tr:nth-child(even) {
    background: #F0F0F0;
}

.className tr:nth-child(odd) {
    background: #FFF;
}

table 是动态创建的，因此无法知道会有多少行。

设计需要 table 的最后一个子项与其上方子项的背景颜色相匹配。

这是在 TWIG 中构建的。

Answer 1

您可以同时测试最后 child 和奇数或偶数。

tr:last-child:nth-child(odd) td{
  background: #f0f0f0;
}
tr:last-child:nth-child(even) td{
  background: #fff;
}

Answer 2

我不知道有什么方法可以 inherit 属性值超出 parent-child 场景的范围（例如；级联样式表）。但是，如果您想要一些 javascript，那么无论它以奇数还是偶数结尾，您都可以这样做。示例如下。

const tables = document.getElementsByClassName('className');

for (let i = 0, x = tables.length; i < x; i++) {
  const rowCount = tables[i].rows.length;
  
  tables[i].rows[rowCount-1].style.backgroundColor = 
  window.getComputedStyle(tables[i].rows[rowCount-2]).backgroundColor;

}

.className tr:nth-child(even) {
  background-color: red;
}

.className tr:nth-child(odd) {
  background-color: blue;
}

.examples {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  color: #fff;
  background-color: #212121;
}

.examples table {
  margin: 3rem 1rem;
}

<section class="examples">
  <table class="className">
    <tbody>
      <tr><td>blah blah blah</td></tr>
      <tr><td>blah blah blah</td></tr>
    </tbody>
  </table>
  <table class="className">
    <tbody>
      <tr><td>blah blah blah</td></tr>
      <tr><td>blah blah blah</td></tr>
      <tr><td>blah blah blah</td></tr>
      <tr><td>blah blah blah</td></tr>
      <tr><td>blah blah blah</td></tr>
      <tr><td>blah blah blah</td></tr>
    </tbody>
  </table>
  <table class="className">
    <tbody>
      <tr><td>blah blah blah</td></tr>
      <tr><td>blah blah blah</td></tr>
      <tr><td>blah blah blah</td></tr>
      <tr><td>blah blah blah</td></tr>
      <tr><td>blah blah blah</td></tr>
    </tbody>
  </table>
</section>

使 table 的最后一个子元素与其上方的 table 元素颜色相同

Making last child of a table the same color as the table element above it

css

css-selectors