Question

我有一个带TD的表行，每个TD元素都有'm-rowcell'类，并且使用'm-hide'类隐藏了一些单元格。

我需要通过仅使用CSS来选择最后一个没有'm-hide'类的TD元素。

.m-hide {
  display: none;
}
.m-rowcell {
  border: 1px solid;
}
tr td:last-child { /*visible last child*/
  background: #FFAA33;
}

<table style="width:100%;">
  <tr class="m-row">
    <td class="m-rowcell">Header 1</td>
    <td class="m-rowcell">Header 2</td>
    <td class="m-rowcell m-hide">Header 3</td>
  </tr>
  <tr>
    <td class="m-rowcell">content 1</td>
    <td class="m-rowcell">content 2</td>
    <td class="m-rowcell m-hide">content 3</td>
  </tr>
  <tr class="m-row">
    <td class="m-rowcell">content 1</td>
    <td class="m-rowcell">content 2</td>
    <td class="m-rowcell m-hide">content 3</td>
  </tr>
  <tr class="m-row">
    <td class="m-rowcell">content 1</td>
    <td class="m-rowcell">content 2</td>
    <td class="m-rowcell m-hide">content 3</td>
  </tr>
</table>

怎么做？

JSfiddle Demo

Answer 1

问题回复后的编辑

你只能用css做到这一点。 CSS可以到达其父级的最后一个元素，它的类型的最后一个元素但不能回到它以前的兄弟，而不会影响所有其他元素。您可以通过在javascript / jquery中循环或仅将特定类添加到您想要选择的td来实现。

CSS选择器选择最后一个TD，它的行中没有'hide'类

1 个答案: