CSS - 如果有类(class)的 child 则隐藏

Question

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

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

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