Question

使用CSS，我想隐藏除第一个之外的所有TH元素，我的格式如下：

<table>
  <tbody>
    <tr>
      <th></th>
    </tr>
    <tr>
      <td></td>
    </tr>
    <tr>
      <td></td>
    </tr>
    <tr>
      <td></td>
    </tr>
    <tr>
      <td></td>
    </tr>
    <tr>
      <td></td>
    </tr>
    <tr>
      <td></td>
    </tr>
  </tbody>
</table>
<table>
  <tbody>
    <tr>
      <th></th>
    </tr>
    <tr>
      <td></td>
    </tr>
    <tr>
      <td></td>
    </tr>
    <tr>
      <td></td>
    </tr>
    <tr>
      <td></td>
    </tr>
    <tr>
      <td></td>
    </tr>
    <tr>
      <td></td>
    </tr>
  </tbody>
</table>
<table>
  <tbody>
    <tr>
      <th></th>
    </tr>
    <tr>
      <td></td>
    </tr>
    <tr>
      <td></td>
    </tr>
    <tr>
      <td></td>
    </tr>
    <tr>
      <td></td>
    </tr>
    <tr>
      <td></td>
    </tr>
    <tr>
      <td></td>
    </tr>
  </tbody>
</table>

我需要检查IE8的解决方案，因为我知道他们不支持伪元素，我正在尝试这样

th:not(:first-child):display:none;

但这不适用于任何浏览器

Answer 1

first-child不是伪元素，它是伪类。在任何情况下，:not只接受“简单选择器”; first-child不符合资格。但是在这里你不能使用first-child，因为它适用于具有共同父元素的元素。

在这种情况下，您可能希望隐藏th不在第一个table内。所以

th                   { display: none;  }
table:first-child th { display: block; }

这是一个标准的CSS习语，用于“将X1的值应用于所有Y的某些属性，除非Z应用值X2”。在普通编程语言中，可以使用涉及if运算符的not语句。在CSS中，利用规则顺序原则，将其写为：

Y { property: X1; }    // standard behavior comes first
Z ( property: X2; }    // exceptional behavior comes next

在您的情况下，“标准行为”是隐藏th，“例外行为”是为第一个显示它。

您可以在这种情况下使用:not，但它并不总是按照您的预期行事，特别是与其他选择器（包括其他:not组合使用时），更不用说“简单选择器”了“限制。

Answer 2

使用jquery可以轻松完成

$（“th：not（：first）”）。css（“background”，“green”）;

$( "th:not(:first)" ).css( "background", "green" );

// "th:not(:first)" ).css( "display", "none" );

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<table border="1">
  <tbody>
    <tr>
      <th>Heading</th>
    </tr>
    <tr>
      <td>sample</td>
    </tr>
    <tr>
      <td>sample</td>
    </tr>
    <tr>
      <td>sample</td>
    </tr>
    <tr>
      <td>sample</td>
    </tr>
    <tr>
      <td>sample</td>
    </tr>
    <tr>
      <td>sample</td>
    </tr>
  </tbody>
</table>
<table border="1">
  <tbody>
    <tr>
      <th>Heading</th>
    </tr>
    <tr>
      <td>sample</td>
    </tr>
    <tr>
      <td></td>
    </tr>
    <tr>
      <td>sample</td>
    </tr>
    <tr>
      <td>sample</td>
    </tr>
    <tr>
      <td>sample</td>
    </tr>
    <tr>
      <td>sample</td>
    </tr>
  </tbody>
</table>
<table border="1">
  <tbody>
    <tr>
      <th>Heading</th>
    </tr>
    <tr>
      <td>sample</td>
    </tr>
    <tr>
      <td>sample</td>
    </tr>
    <tr>
      <td>sample</td>
    </tr>
    <tr>
      <td></td>
    </tr>
    <tr>
      <td>sample</td>
    </tr>
    <tr>
      <td>sample</td>
    </tr>
  </tbody>
</table>

使用css隐藏除第一个之外的元素

2 个答案: