Question

我有一张桌子，里面有另一张桌子，我需要设置主表的样式，但保留内部表格。我试过你＆gt; 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

尝试使用每个直接子>。

＆＃13;

#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; 
}

＆＃13;

<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>

＆＃13;

Answer 2

更正：

    <configuration>
      ...
      <forkCount>1</forkCount>
      <reuseForks>true</reuseForks>
    </configuration>

选择只有表的直接子项

2 个答案: