Question

我需要定位可见的表格行中的第一个<td>元素 - 这意味着它没有display:none的内联样式。

这是gotchyas：

他们并不总是隐藏
有时会隐藏多个。
我无法编辑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"])

Here's a fiddle to mess with

提前致谢。

Answer 1

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 2

这样可以设置任何不是“display：none”的样式，但是当它到达后续的“display：none”时撤消它。

table > tbody > tr > td:not([style*="display:none"]) {
    color: red;
}
table > tbody > tr > td:not([style*="display:none"]) ~ td:not([style*="display:none"]) {
    color: inherit;
}

<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>
  </tbody>
</table>

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

2 个答案: