应用：不在嵌套表中

Posted 2023-03-06

【中文标题】应用：不在嵌套表中

【英文标题】：Apply :not in nested table

【发布时间】：2021-01-06 03:33:23

【问题描述】：

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; 

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

【问题讨论】：

表格应该用于表格数据。并且很少需要嵌套表。我相信你的情况也不例外。 html5 提供了足够数量的元素来布局文档。另见w3c recomedations

【参考方案1】：

你这么说..

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

所以，我假设您希望 TEXTA 和 TEXTC 被着色（而不是您所说的 TEXTB）。

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

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

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

见CSS selector - element with a given child

编辑

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

例如，添加opacity 和color css 属性：

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

【讨论】：

您能给我推荐一个替代解决方案吗？以不透明为例。我只想为 TEAXTA 和 TEXTC 添加 0.7 不透明度。我不希望桌子有这种风格。我该怎么做？

我刚刚编辑了我的答案，并包含了一个解决问题的 jquery 代码。

这是一个很好的解决方案！如果我只想排除表格内容并将“下面有嵌套表格”文本也涂成红色，这可能吗？

【参考方案2】：

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

【讨论】：

我没有使用这种方法的原因是因为在实际场景中还有其他我正在应用的样式。这些也得到继承。虽然此修复适用于颜色属性，但它不适用于不透明度。 （我不明白为什么）。例如，如果我在 table.parent td:first-child 中应用 70% 的不透明度，它也会反映在表格中，我只是无法改回 100% 。难道没有任何直接的方法可以实现这一点而无需应用和重新应用 css？

@ItykaBandta 我认为不透明度是一种独特的，因为你不能让父母像opacity: 0.5，但孩子像opacity: 1。这可以通过使用rgba() 来避免background-color，否则我不确定。可悲的是，我找不到用 1 行 CSS 完成您所要求的方法

有道理。我在想我是否可以使用脚本来处理这种情况。就像我们有 .has() 过滤掉元素一样。所以，假设我只想为包含嵌套表的 td 添加背景，我会写类似 $( "td" ).has( "table" ).css( "background-color", "red" );它有效。在 jquery 或 JS 中有什么与 :has 相反的东西吗？这样就可以解决问题了。

@ItykaBandta 我不确定，因为我不是 JS 或 Jquery 方面的专家。我会重新发布这个问题，但要求 JS 或 Jquery 答案。

【参考方案3】：

给 TEXTA 和 TEXTB 上课 例如： (html)

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

(css)

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

【讨论】：

我觉得如果 OP 想要做一个这样的解决方案，他会把它放进去。我相信他们正在寻找一个更基于 CSS 的解决方案。