隐藏 DIV 但在 CSS 中显示子类

Posted 2023-02-25

【中文标题】隐藏 DIV 但在 CSS 中显示子类

【英文标题】：Hide DIVs but show sub-class in CSS

【发布时间】：2014-05-22 05:30:29

【问题描述】：

我正在尝试隐藏具有“行”类的调用 DIV，但显示具有“打印”类的表。这是 html：

<div class="row">
    <table cellpadding="0" cellspacing="0" class="print">
        <tr><td>Monday</td></tr>
    </table>
</div>

这是我正在尝试的 CSS：

.row  display: none; 
.row .print 
    display: block !important;

我尝试了几个选项，但无法显示表格。

谢谢

【问题讨论】：

当一个元素被隐藏时，它的所有子元素都被隐藏了。

【参考方案1】：

您可以为此使用简单的 jquery

$('.print').parent().show();

CSS

.row  display: none; 

这里是Demo

【参考方案2】：

给要显示 ID 的行，如下所示：

<div class="row" id="row-displayed">
  <table cellpadding="0" cellspacing="0" class="print">
    <tr><td>Monday</td></tr>
  </table>
</div>

使用 CSS：

.row  display: none; 
#row-displayed  display: block 

或者您也可以为该行提供具有相同 CSS 的另一个类（例如 row-displayed），只需定位 .row-displayed 并确保其 CSS 低于 .row CSS。由于 CSS 的级联性质，这将起作用。

【讨论】：

我正在尝试使用 CSS 打印在 WordPress 和 OptimizePress 中创建的页面。它有所有带有“行”类的 DIV，但我想用表格显示行。无法在 OptimizePress 中将类或 ID 添加到行中。

那你应该看看Manwal的解决方案。它将需要 javascript/jQuery。

【参考方案3】：

你可以实现那个 Jquery

$(document).ready(function ()             
            $(".print").closest('.row').show();
        );

【参考方案4】：

在 CSS 中你不可能使用 JQuery 来实现你想要的。

但是如果你想使用 JQuery 试试这个：

$(document).ready(function ()             
        $(".print").closest('.row').show();
    );

【讨论】：

然后呢？这太简短了，无法提供有用的答案。

【参考方案5】：

你会试试这个：

.row * 
    display: none;

.row .print 
    display: block !important;

由于隐藏元素总是隐藏其子元素，因此您要做的是隐藏不需要的子元素，而不是元素本身。

【参考方案6】：

真的是.row 类的元素在打印时必须是不可见的，而只有.print 的子元素必须可见吗？

另一种解决方法是让.row 的所有子级不可见，如果他们有类.print：

.row > *  
    display: none;


.row > .print 
    display: block;

这只有在没有 TextNode 作为 .row 的直接子节点且必须是不可见的情况下才有效。