底线：

Question

如果头部的th具有类.isSystem，我需要将td隐藏在体内

在纯CSS中有可能吗？

更多信息：该表是动态构建的。头/列是一个数组...而躯干/行是另一个数组。我正在使用Angular /打字稿...

我尝试过：th.isSystem〜td {text-decoration：line-through;红色; }

Answer 1

如果表是动态构建的，那么显而易见的方法是使用select top 1 with ties sp_numer, CAST(ks_data_operacji as date) as data_ostatniej_wplaty from sprawa join ksiegowanie_dekret on ksd_rb_id=sp_rb_id join ksiegowanie on ksd_ks_id=ks_id where sp_numer=102079 and ksd_ksksub_id<>2 order by ROW_NUMBER() over (partition by sp_numer order by ks_data_operacji desc)而不是create table ##temp ( sp_numer varchar(10), ks_data_operacji date, ksd_ksksub_id int ) insert into ##temp values (102079,'2013-07-24',5), (102079,'2013-10-03',6) ,(102079,'2015-11-17',2)来驱动此行为。 col元素具有特殊的功能，使它们能够影响它们所属的单元格。

th

<col>

免责声明：此功能在Firefox，IE11和Edge中宣传。 Chrome，但是...对不起。

Answer 2

底线：

否，因为<td>和<th>不能成为同级，因为它们不是<table>的正确子代，即使您的源代码标记是那样的-浏览器也会调整它们。标记并否决您的样式。

详细说明：

再看JS related SO question on the subject，浏览器会自动将<thead>和<tbody>注入您的<th>和<tr>（随后是<td>）周围元素。 <thead>和<tbody>是<table>的有效子元素-<th>和<tr>不是有效的子元素。

结果是，找到<th>的兄弟姐妹将仅返回其他th标签，因为从技术上讲，它们生活在<thead>中-<td>在<tr>中<tbody>

看看这些例子：

示例1

Codepen with straight <th> and <tr> elements

.isSystem + .row { background:red }

<table>
    <th class="isSystem">Table Heading</th>
    <tr class="row">
        <td>Table Item</td>
    </tr>
</table>

<div class="isSystem">Div Heading</div>
<div class="row">Div Item</div>

在此示例中，您希望表行为红色...示例中的div元素可以做到这一点，但<tr>却不可以

示例2

Codepen with proper <thead> and <tbody> elements

在示例2中，使用正确的thead和tbody元素包装表格，您可以实现以下目标：

.isSystem + .rows tr { background:red; }

<table>
    <thead class="isSystem"><th>Heading</th></thead>
    <tbody class="rows">
        <tr class="row"><td>Item</td></tr>
    </tbody>
</table>

不幸的是，如果您的项目是动态生成的，并且您不能以这种方式应用您的类，那么您唯一的选择就是使用JS来定位您的元素，就像其他人已经提到的那样。但是，我将尽一切可能先创建适当的语义标记。

CSS-如果有类，则将td隐藏在正文中

2 个答案:

底线：

详细说明：

示例1

示例2