html – 只选择表的直接子项

概述我有一个桌子,里面有另一张桌子,我需要设置主表的样式,但保留内部表格.我试过你> CSS中的选择器虽然样式化主表内部继承了main的所有内容. HTML <table id="main-table"> <tbody> <tr> <td colspan="2">header</td> </tr> <tr> 我有一个桌子,里面有另一张桌子,我需要设置主表的样式,但保留内部表格.我试过你> 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;}

解决方法 试试这个,使用直接儿童>每一个人.

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

总结

以上是内存溢出为你收集整理的html – 只选择表的直接子项全部内容，希望文章能够帮你解决html – 只选择表的直接子项所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。