css - CSS - 如果有班级的孩子则隐藏

Question

我正在尝试制作一个打印样式表，它隐藏（不打印）没有带有 set 类的子元素的元素。

我认为这可能有效，但遗憾的是它没有。

<style type="text/css" media="print">
    table:not( > thead > tr > th > .Collapse)  {
        display:none;
    }
</style>

如果可能的话，我不想使用任何 javascript。

这可以做到吗？

这是相关元素的 html ......第二个表格在打印时应该被隐藏......

<table>
    <thead>
        <tr>
            <th>
                <span class="Collapse">Lorem ipsum...</span>
            </th>
        </tr>
    </thead>
    <tbody style="display: none; ">
        <tr>
            <td>Blah Blah...</td>
        </tr>
    </tbody>
</table>
<table>
    <thead>
        <tr>
            <th>
                <span class="Expand">Lorem ipsum...</span>
            </th>
        </tr>
    </thead>
    <tbody style="display: none; ">
        <tr>
            <td>Blah Blah...</td>
        </tr>
    </tbody>
</table>

Answer 1

相反，我建议将类放在桌子上，然后选择其中的跨度。

<table class="Collapse">
    <thead>
        <tr>
            <th>
                <span>Lorem ipsum...</span>
            </th>
        </tr>
    </thead>
    <tbody style="display: none; ">
        <tr>
            <td>Blah Blah...</td>
        </tr>
    </tbody>
</table>
<table class="Expand">
    <thead>
        <tr>
            <th>
                <span>Lorem ipsum...</span>
            </th>
        </tr>
    </thead>
    <tbody style="display: none; ">
        <tr>
            <td>Blah Blah...</td>
        </tr>
    </tbody>
</table>

.Collapse {
   display:none;
}

.Collapse thead tr th span {
}

.Expand thead tr th span {
}

Answer 2

以跨度为目标：

table > thead > tr > th > .Expand  {
    display:none;
}

更新

目前不可能定位一个 CSS 类并影响它的父级。隐藏表格的最简单方法是向其中添加一个类，然后您可以轻松地定位该类。

例子

<table>
    <thead>
        <tr>
            <th>
                <span class="Collapse">Lorem ipsum...</span>
            </th>
        </tr>
    </thead>
    <tbody style="display: none; ">
        <tr>
            <td>Blah Blah...</td>
        </tr>
    </tbody>
</table>
<table class="hide-for-print">
    <thead>
        <tr>
            <th>
                <span class="Expand">Lorem ipsum...</span>
            </th>
        </tr>
    </thead>
    <tbody style="display: none; ">
        <tr>
            <td>Blah Blah...</td>
        </tr>
    </tbody>
</table>