隐藏DIV但在CSS中显示子类

Question

我正在尝试使用类'row'隐藏调用DIV，但显示一个类为'print'的表。这是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;
}

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

由于

Answer 1

你可以使用简单的jquery来实现这个

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

的CSS

.row { display: none; }

这是 Demo

Answer 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并确保其CSS低于.row CSS。这将起作用，因为CSS的级联性质。

Answer 3

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

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

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

Answer 4

你可以实现那个Jquery

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

Answer 5

你会试试这个：

.row * {
    display: none;
}
.row .print {
    display: block !important;
}

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

Answer 6

在打印时是否必须隐藏具有类.row的元素，并且只有.print的子项必须可见？

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

.row > *  {
    display: none;
}

.row > .print {
    display: block;
}

只有在没有 TextNode 作为.row的直接子项且必须不可见的情况下，才会有效。