<table> 受 :first-child 伪类的影响，尽管它不是为规则设置的元素的第一个子元素

Posted 2023-03-06

【中文标题】<table> 受 :first-child 伪类的影响，尽管它不是为规则设置的元素的第一个子元素

【英文标题】：<table> is affected by :first-child pseudo-class although it is not first-child of element the rule is set up for

【发布时间】：2021-07-21 23:41:11

【问题描述】：

我在 MDN 页面上测试了使用选择器的技巧，我遇到了这样的情况该 div 元素的子元素。为什么会这样？我是否缺少表格元素的一些一般规则？正如我所料，只有第一个 p 元素应该受此规则影响。

我附上了 MDN 上使用的 html 代码和导致此问题的 CSS 解决方案。

.container :first-child font-size: 150%

.container :first-child::first-line color: red

<div class="container">
  <p>Veggies es
    <a href="http://example.com">bonus vobis</a>, proinde vos postulo essum magis kohlrabi welsh onion daikon amaranth tatsoi tomatillo melon azuki bean garlic.</p>
  <p>Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette tatsoi pea sprouts fava bean collard greens dandelion okra wakame tomato. Dandelion cucumber earthnut pea peanut soko zucchini.</p>
  <table>
    <tr>
      <th>Fruits</th>
      <th>Vegetables</th>
    </tr>
    <tr>
      <td>Apple</td>
      <td>Potato</td>
    </tr>
    <tr>
      <td>Orange</td>
      <td>Carrot</td>
    </tr>
    <tr>
      <td>Tomato</td>
      <td>Parsnip</td>
    </tr>
    <tr>
      <td>Kiwi</td>
      <td>Onion</td>
    </tr>
    <tr>
      <td>Banana</td>
      <td>Beet</td>
    </tr>
  </table>
</div>

【参考方案1】：

您正在使用.container 和:first-child 之间的后代组合符（空格）。这会导致 CSS 规则适用于表的所有后代，包括 tbody（隐式）、tr、th 和 td，因为

(implicit) tbody 是表的第一个（也是唯一的）孩子， 第一个 tr 是 tbody 的第一个孩子， 并且每个第一个 th 和 td 都是其各自 tr 的第一个孩子。

这会导致所有 font-size: 150% 声明以相乘方式堆叠，导致第一行的文本比其他行更大，并且 ::first-line 规则适用于每个第一个 th 和 td（每个只有一个单词，所以它是每个单元格的第一个也是唯一一个格式化的行）。

使用child combinator > 可以确保只考虑容器 div 的 children（p 和 table 元素），从而获得预期的结果：

.container > :first-child font-size: 150%

.container > :first-child::first-line color: red

<div class="container">
  <p>Veggies es
    <a href="http://example.com">bonus vobis</a>, proinde vos postulo essum magis kohlrabi welsh onion daikon amaranth tatsoi tomatillo melon azuki bean garlic.</p>
  <p>Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette tatsoi pea sprouts fava bean collard greens dandelion okra wakame tomato. Dandelion cucumber earthnut pea peanut soko zucchini.</p>
  <table>
    <tr>
      <th>Fruits</th>
      <th>Vegetables</th>
    </tr>
    <tr>
      <td>Apple</td>
      <td>Potato</td>
    </tr>
    <tr>
      <td>Orange</td>
      <td>Carrot</td>
    </tr>
    <tr>
      <td>Tomato</td>
      <td>Parsnip</td>
    </tr>
    <tr>
      <td>Kiwi</td>
      <td>Onion</td>
    </tr>
    <tr>
      <td>Banana</td>
      <td>Beet</td>
    </tr>
  </table>
</div>