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