选择只有表的直接子项

Question

我有一个桌子,里面有另一张桌子,我需要设置主表的样式,但保留内部表格.我尝试了CSS中的>选择器,但是在主表内部样式化时继承了main的所有内容.

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>