时间戳

首页 > 解决方案 > 应用：不在嵌套表中

html - 应用：不在嵌套表中

问题描述

table.parent td:nth-of-type(1):not(table.nested td){
  color: red; 
}
<table class="table parent">
<tbody>
    <tr>
    <td>TEXTA</td>
    <td>TEXTB</td>
    </tr>
    <tr>
    <td>Has nested table below
        <table class="table nested">
        <tbody>
        <thead>
        <th>S.No.</th>
        <th>Name</th>
        <th>Contact</th>
        </thead>
        <tr>
        <td>1</td>
        <td>ABC</td>
        <td>PQR</td>
     </tr>
     </tbody>
     </table>
     </td>
     </tr>
   <tr>
    <td>TEXTC</td>
    <td>TEXTD</td>
    </tr>
</tbody>
</table>

我有一个嵌套表如下 -

<table class="table parent">
<tbody>
    <tr>
    <td>TEXTA</td>
    <td>TEXTB</td>
    </tr>
    <tr>
    <td>Has nested table below
        <table class="table nested">
        <tbody>
        <thead>
        <th>S.No.</th>
        <th>Name</th>
        <th>Contact</th>
        </thead>
        <tr>
        <td>1</td>
        <td>ABC</td>
        <td>PQR</td>
     </tr>
     </tbody>
     </table>
     </td>
     </tr>
   <tr>
    <td>TEXTC</td>
    <td>TEXTD</td>
    </tr>
</tbody>
</table>

要求 - 只有 TEXTA 和 TEXTB 应该涂成红色。在实际场景中有很多行。我只希望父表中每一行的第一个 td 被着色。我正在做类似的事情 -

table.parent td:nth-of-type(1):not(table.nested td){
  color: red; 
}

这没有给我任何结果。实现这一目标的正确方法是什么？

标签： htmlcss

解决方案

花了一段时间玩这个。我能做的最好的事情是建议使用 2 行 CSS 而不是 1 行。一个选择器完成所有第一行，一个选择器将它们td设置nested回它们所属的位置。

table.parent tr:first-child td {
  color: red; 
}

table.nested tr:first-child td {
  color: black; 
}
<table class="table parent">
<tbody>
    <tr>
    <td>TEXTA</td>
    <td>TEXTB</td>
    </tr>
    <tr>
    <td>Has nested table below
        <table class="table nested">
        <tbody>
        <thead>
        <th>S.No.</th>
        <th>Name</th>
        <th>Contact</th>
        </thead>
        <tr>
        <td>1</td>
        <td>ABC</td>
        <td>PQR</td>
     </tr>
     </tbody>
     </table>
     </td>
     </tr>
   <tr>
    <td>TEXTC</td>
    <td>TEXTD</td>
    </tr>
</tbody>
</table>

推荐阅读