Question

所以我一直在努力研究隐藏和展示元素的一些类。当一个元素应该显示时，它应该从display:none;到display: whatever-it-was-before;。在研究如何做到这一点时，我偶然发现了一个看起来很完美的解决方案：CSS revert。不幸的是，级联和继承级别4还有很长的路要走，而且这个功能似乎没有在Windows上的任何主要浏览器中实现。

为了说明我尝试做什么，这里有一些CSS：

.article-card {
    display: flex;
}
._showdesktop {
    display: none !important;
}
@media screen and (min-width: 1024px) {
    ._showdesktop {
        display: revert !important;
    }
}

并附带一些HTML：

<div class="article-card _showdesktop">
    ...
</div>

我们的想法是拥有可以在任何元素上使用的泛型类，而不会覆盖元素的预期CSS。这样我就可以使用相同的类集显示和隐藏display:flex;，display:block;，display:inline-block;或display:inline;元素。

所以，我有两个问题：

那里有没有填充物？我试着四处寻找，但不幸的是条款＆＃34;还原＆＃34; ＆＃34; polyfill＆＃34;由于版本控制系统，它们共同展现出来。
有没有其他方法可以用CSS做到这一点？我正在寻找使用visibility:hidden;，因为我几乎从未在我的项目中使用visibility属性，但这并没有从流中删除元素，我无法思考任何方式删除它不会与其他代码冲突。

https://drafts.csswg.org/css-cascade/#default

更新：下面标记的答案与我现在要做的一样好，但我想用我最终使用的代码更新此问题。考虑到我经常使用max-height，我不确定它会有多好用，但希望它经常不会发生冲突：

._hidemobile,
._showtablet,
._showdesktop {
    max-height: 0 !important;
    visibility: hidden !important;
}

._showmobile {
    max-height: none !important;
    visibility: visible !important;
}

@media screen and (min-width: 768px) {
    ._showmobile,
    ._hidetablet {
        max-height: 0 !important;
        visibility: hidden !important;
    }

    ._showtablet {
        max-height: none !important;
        visibility: visible !important;
    }
}

@media screen and (min-width: 1024px) {
    ._showtablet,
    ._hidedesktop {
        max-height: 0 !important;
        visibility: hidden !important;
    }

    ._showdesktop {
        max-height: none !important;
        visibility: visible !important;
    }
}

Answer 1

那里有没有填充物？我试着四处寻找，但不幸的是条款＆＃34;还原＆＃34; ＆＃34; polyfill＆＃34;一起出现一个   非常感谢版本控制系统。

可能不是。 revert回滚级联，这是一件非常重要的事情。

而且，我不确定它会对你的情况有所帮助。您使用display: flex设置元素的样式，但display: none赢得级联。如果我理解正确，您要撤消display: none并获取display: flex。但是，revert

将级联回滚到用户级别，以便计算specified value，就像没有指定任何作者级规则一样这个属性。

也就是说，您的作者级display: flex也会被忽略。

相反，当您想要将display: revert重置为默认行为时，display非常有用，例如block为<div>，table-cell为<td>，inline为<span>。

有没有其他方法可以用CSS做到这一点？我正在寻找使用visibility:hidden;，因为我几乎从不使用visibility   我的项目中的属性，但这不会从中删除元素   流动，我无法想出任何方法去除它不会   与其他代码冲突。

是。正如您所怀疑的那样，display: none是一种奇怪的东西，应该从未存在过。 CSS Display Level 3通过引入名为box-suppress的新属性来解决此问题：

display: none值历来用作＆＃34;切换＆＃34;至在显示和隐藏元素之间切换。使这个可逆需要仔细设置CSS cascade，或者记住display值设置之前的值 none。为了使这个常见的用例更容易，这个模块引入单独的box-suppress属性来执行相同的操作事情，以便切换元素是否出现在现在可以在不影响其显示类型的情况下完成格式化树当显示时。

＆＃34; only＆＃34;问题是没有主浏览器也不支持box-suppress。

同时，最好的方法是仅在您需要时应用display: none，这样您就不必撤消它。在您的示例中，

＆＃13;

.article-card {
  display: flex;
}
@media screen and (min-width: 1024px) { /* This rule is optional */
  ._showdesktop {
    /* Use current display */
  }
}
@media screen and (max-width: 1024px) {
  ._showdesktop {
    display: none;
  }
}

＆＃13;

<div class="article-card _showdesktop">Hello world</div>

＆＃13;

Answer 2

这是一个非常老的问题，我不认为此答案立即可用（任何“还原”值似乎都已被删除，并且“框抑制”也从未实现），但是当前的实现方式这似乎是：

display: "contents";

通过使用该元素和包装器元素，现在可以“撤消” display: "none";，因为"contents"类型不会在文档流中生成块（就像"none"一样），但是它确实将其内容放入流中。

一些例子：

var toggle = 'contents'
btn = document.getElementById('showHide');
btn.onclick = function(ev) {
  toggle = ('none' === toggle) ? 'contents' : 'none'
  var disp = document.querySelectorAll('.toggle')
  disp.forEach( el => el.style.display = toggle )
}

.toggle { border: 1px dotted red; }

<section>
<p>
On first load, display is the browser default and outlines the elements under test. Each click toggles display:none/display:contents.<br>
<button id="showHide">TOGGLE DISPLAY</button>
</p>

<div>
Text above the first toggle element.
<span class="toggle">Text in the first toggle element.</span>
Text below the first toggle element. Note that everything flows together.
</div>

<p></p>

<div>
In a new div now, a list comes next.
<ol><li>AAA</li>
    <li class="toggle">BBB</li>
    <li>CCC</li>
</ol>
This text is after the list. The second &lt;li&gt; becomes its content.
<hr>

Here's a list that will toggle the display property on itself:
<ol class="toggle"><li>JJJ</li>
    <li>KKK</li>
    <li>LLL</li>
</ol>
When displayed again, the &lt;od&gt; is gone, but the &lt;li&gt; remain.
<hr>

This list has an embedded dev.
<ol><li>XXX</li>
    <div class="toggle"> <li>YYY</li> </div>
    <li>ZZZ</li>
</ol>
This is invalid HTML but after becoming display:contents it should appear normal.

</div>
</section>

Answer 3

我不认为这里的大多数海报都明白“还原”是什么？对于初学者来说，它仅适用于非 IE 浏览器。所以不是很有帮助。在像“display”这样的非继承属性上，它会“恢复”到浏览器的元素的 UA 默认样式表值，而不是作者的表，在这种情况下，作者的表将是 div 的“块”。

为什么不简单地做相反的事情，只在显示时在媒体查询中定义各种 div？

stdout:
stderr: 'chcp' is not recognized as an internal or external command,
operable program or batch file.
'chcp' is not recognized as an internal or external command,
operable program or batch file.
'chcp' is not recognized as an internal or external command,
operable program or batch file.

return code: 1

()


(base) C:\Users\deves>

(base) C:\Users\deves>jupyter notebook
[C 12:05:35.041 NotebookApp] Bad config encountered during initialization: The 'kernel_spec_manager_class' trait of <notebook.notebookapp.NotebookApp object at 0x0000022CC9114F10> instance must be a type, but 'nb_conda_kernels.CondaKernelSpecManager' could not be imported.

使用CSS＆＃34;恢复＆＃34;关键词

3 个答案: