1 

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

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

4

3 回答 3

1

花了一段时间玩这个。我能做的最好的事情是建议使用 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>

于 2020-09-19T12:23:18.923 回答
1

你之前这么说..

我只希望父表中每一行的第一个 td 被着色

所以，我假设你想要 TEXTA 并被TEXTC着色（而不是TEXTB你所说的）。

如果是这种情况，那么您的想法是选择不包含a specific child element（table.nested）的元素（每行的第一个 td）。

这在 CSS2 或 CSS3 中是不可能的。

CSS2 和 CSS3 选择器规范确实not允许任何类型的parent selection.

请参阅CSS 选择器 - 具有给定子元素的元素

编辑

您可以使用 jquery/javascript 来执行此操作。

例如，添加opacity和colorcss 属性：

$(document).ready(function(){
  $('table.parent > tbody > tr > td:first-child').each(function(){

  if ($(this).has('table.nested').length == 0){
    $(this).css('opacity', '0.5');  
    $(this).css('color', 'red');
  }

  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<table class="table parent">
<tbody>
    <tr>
      <td>TEXTA</td>
      <td>TEXTB</td>
    </tr>
    <tr>
      <td>Has nested table below
        <table class="table nested">
          <thead>
            <th>S.No.</th>
            <th>Name</th>
            <th>Contact</th>
          </thead>
          <tbody>
            <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>

于 2020-09-19T12:24:53.090 回答
0

只需给 TEXTA 和 TEXTB 一些类，例如：(html)

<td class="red-color-text">TEXTA</td>
<td class="red-color-text">TEXTB</td>

（CSS）

.red-color-text{颜色：红色；}

于 2020-09-19T12:22:28.963 回答