Question

我的代码截至目前为止

body > :not(form) {
    display:none !important;
}

我试图只显示在＆＃39;表格中找到的元素。标签用于打印屏幕。但是，现在我意识到表单标记包含带有id的不需要的div标签，例如

<div id="logo">
<div id= "tabs">
<div id="topbar">

只需要<div id="body">。我试过做

body > :not(form) > :not(#body) {
    display:none !important;
}

和

body > :not(form) > :not(#logo) > :not(tabs) > :not(topbar) {
    display: none !important;
    form > :not(#body) {
        display:none !important;
    }
}

知道如何只在#form元素中显示#body元素吗？谢谢。

Answer 1

我会使用以下方法。

form > div {
    display: none;
}
form > div#body {
    display: block;
}

第一条规则会隐藏所有div元素中的每个子form。

第二条规则允许显示div#body（因此，可打印）。

如果您有多个表单，则可能需要使选择器更具体。

您实际上并不需要:not（否定）伪类。

参考：http://www.w3.org/TR/css3-selectors/#negation

Answer 2

规则body > :not(form) > :not(#body)不起作用，因为正如您所描述的那样，#body元素在形式中是，而规则的前一部分明确指出您要在< em>非形式元素。

在您的情况下，两个规则的组合应该正常工作：

body > :not(form),
body > * > :not(#body) {
    display:none !important;
}

检查测试演示（除了表格标签中的BODY外，所有内容都应隐藏）：

＆＃13;

body >:not(form),
body > * > :not(#body) {
    display:none !important;
}

＆＃13;

<div>DIV</div>
<form>
    <div id="logo">LOGO</div>
    <div id="body">BODY</div>
    <div id="topbar">TOPBAR</div>
</form>
<p>P</p>

＆＃13;

Answer 3

给你想要的元素一类：

.printme

其他一切：

.donotprintme

然后这个：

@media print
{
    .printme { display:block; }
    .donotprintme { display: none; }
}

如何创建嵌套的＆gt;：not（）语句？

3 个答案: