Question

<!DOCTYPE html>    
<html>
  <head>
    <style>
      tbody > tr {
        color: grey
      }
    </style>
  </head>
  <body>
    <table>
      <thead>
        <tr><th colspan="2">Favourite films</th></tr>
        <tr><th>Title</th><th>Year</th></tr>
      </thead>
      <tbody>
        <tr><td>The Shawshank Redemption</td><td>1994</td></tr>
        <div>
          <tr><td>Django Unchained</td><td>2012</td></tr>
          <tr><td>Candyman</td><td>1992</td></tr>
        </div>
      </tbody>
    </table>

为什么div中的行会变得太灰？我写了tbody＆gt; tr，而不是tbody tr，所以只有第一行（tbody的直接子节点）应该变成灰色。

Answer 1

来自manual：

允许的内容：零个或多个<tr>元素。

因此，您的浏览器忽略了div元素

中的<tbody>

您可以尝试以下

tbody > tr:first-of-type

Example

您也可以使用：

tbody > tr:nth-child(1)

Example

Answer 2

要选择第一行，您只需执行此操作

tbody > tr:first-child

你需要删除tbody中的div，因为它无效

Answer 3

tbody＆gt; tr表示tr的第一级而不是第一级tr.Rest都很好地解释了。切勿将div放入tr中，如果需要，可以将其放在td内。

造型直接的孩子

3 个答案: