如何仅使用 CSS 定位可见的第一个子级（在设置为 display:none 的子级之后）

Question

我需要<td>定位表行中可见的第一个元素——这意味着它没有display:none.

这是有问题的：

• 它们并不总是隐藏的
• 有时隐藏不止一个。
• 我无法编辑 HTML 或使用 javascript/jQuery——这需要是一个纯 CSS 解决方案（希望如此）

以下是代码的快速示例：

<table>
    <thead>
        <tr>
            <th style="display:none">Header1</th>
            <th>Header2</th>
            <th>Header3</th>
            <th>Header4</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td style="display:none">Body1</td>
            <td>Body2</td>
            <td>Body3</td>
            <td>Body4</td>
        </tr>
    </tbody>
</table>

我尝试搞乱这样的事情但无济于事：

table > tbody > tr > td:first-of-type:not([style*="display:none"]) 

这是一个要搞乱的小提琴

提前致谢。

Answer 1

如果隐藏元素始终位于行的开头，则可以为此使用直接同级选择器+。

td:first-child,
td[style*="none"] + td {
  color: red;
}

<table>
  <thead>
    <tr>
      <th style="display:none">Header1</th>
      <th>Header2</th>
      <th>Header3</th>
      <th>Header4</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td style="display:none">Body1</td>
      <td>Body2</td>
      <td>Body3</td>
      <td>Body4</td>
    </tr>
    <tr>
      <td>First</td>
      <td>Second</td>
      <td>Third</td>
    </tr>
    <tr>
      <td style="display:none">and</td>
      <td>here's</td>
      <td>an</td>
      <td style="display:none">edge</td>
      <td>case</td>
    </tr>

  </tbody>
</table>