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>

CSS - 隐藏如果有孩子与班级

2 个答案: