如何选择表中的元素，但该表内的子表中没有元素？ [复制]答案

【问题标题】：How does one select elements in a table, but none of the elements in subtables inside of that table? [duplicate]如何选择表中的元素，但该表内的子表中没有元素？ [复制]
【发布时间】：2017-08-09 07:36:33
【问题描述】：

我已经搜索和搜索，但似乎无法弄清楚为什么这不起作用。

目标：为第一个表中的第一个 td 设置背景颜色为红色，同时不为第二个表设置任何背景颜色。

#table1 > tr > td:nth-child(1)
{
  background-color: red;  
}

/*Ignore this*/
table td{
  padding: 10px;  
  border: 1px solid black;
  border-collapse: collapse;
}

<table id='table1'>
<tr>
  <td>1</td>
  <td>2
  
    <table>
      <tr>
        <td>3</td>
        <td>4</td>
      </tr>
    </table>
    
  </td>
</tr>
</table>

【问题讨论】：

在您的第一个选择器中的 tr 之前添加一个 tbody。如果您没有在 HTML/ 中指定，浏览器会自动添加一个

标签： css css-selectors

【解决方案1】：

#table1>tbody>tr>td:first-child
{
  background-color: red;  
}

table td{
  padding: 10px;  
}

<table id='table1' border=1>
<tbody>
<tr>
  <td>1</td>
  <td>2
  
    <table border=1>
      <tr>
        <td>3</td>
        <td>4</td>
      </tr>
    </table>
    
  </td>
</tr>
</tbody>
</table>

【讨论】：

【解决方案2】：

添加 <tbody> 已修复（感谢 Mike！）

#table1 > tbody > tr > td:nth-child(1)
{
  background-color: red;  
}

/*Ignore this*/
table td{
  padding: 10px;  
  border: 1px solid black;
  border-collapse: collapse;
}

<table id='table1'>
  <tbody>
    <tr>  
      <td>1</td>
      <td>2

        <table>
          <tbody>
            <tr>
              <td>3</td>
              <td>4</td>
            </tr>
          </tbody>
        </table>

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

【讨论】：