在CSS中查找第一个可见的表行

Question

如果我有这样的表格布局:

<table>
  <tr class="one">
    <td>
      ...
    </td>
  </tr>
  <tr class="two">
    <td>
      ...
    </td>
  </tr>
  <tr class="three">
    <td>
      ...
    </td>
  </tr>
  <tr class="four">
    <td>
      ...
    </td>
  </tr>
</table>

找到第一个显示行的最简单方法是什么？我这样说是因为某些行类可能将"display:none"设置为过滤过程的一部分.

我以为:

tr:first-child

会工作但事实证明它隐藏行时不会!

Answer 1

如果您可以jQuery简单地使用它:

$('tr:visible:first').foo();

没有javascript就无法做到.

如果速度对您来说非常重要,那么速度会快一些:

$('tr').filter(':visible').first().foo();

文档:

因为:visible是一个jQuery扩展而不是CSS规范的一部分,使用:visible的查询无法利用本机DOM querySelectorAll()方法提供的性能提升.要在使用时获得最佳性能:可见选择元素,首先使用纯CSS选择器选择元素,然后使用.filter(":visible").