html - 仅选择表的直接子项

Question

我有一张 table ，里面有另一张 table ，我需要设计主 table 的样式，但保留内部 table 。我试过在 CSS 中使用 > 选择器，但是在设置主表内部样式时继承了主表的所有内容。

HTML

<table id="main-table">
    <tbody>
        <tr>
           <td colspan="2">header</td>
        </tr>
        <tr>
            <td>
                <table id="inner-table">
                   <tbody>
                      <tr>
                          <td >data</td>
                      </tr>
                   </tbody>
                </table>
            </td>
        </tr>
    </tbody>
</table>

CSS

#main-table > tbody tr td{
    position: relative;
    width: 300px;
    height: 50px;
    font-size: 15px;
    background: #E6F4FF;
    color: #035B9C;
    padding: 10px;
    box-sizing: border-box;
    height: 60px;
    border: 1px solid #E6F4FF;
}

Answer 1

试试这个，为每个子对象使用直接子对象 >。

#main-table > tbody > tr > td {
  position: relative;
  width: 300px;
  height: 50px;
  font-size: 15px;
  background: #E6F4FF;
  color: #035B9C;
  padding: 10px;
  box-sizing: border-box;
  height: 60px;
  border: 1px solid #E6F4FF;
}

/* demo purposes */
td {
  color: red; 
}

<table id="main-table">
  <tbody>
    <tr>
      <td colspan="2">header</td>
    </tr>
    <tr>
      <td>
        <table id="inner-table">
          <tbody>
            <tr>
              <td>data</td>
            </tr>
          </tbody>
        </table>
      </td>
    </tr>
  </tbody>
</table>