使用CSS的“还原”关键字

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;所有具有相同类别集合的元素。

所以，我有两个问题：

1. 是否有任何填充工具了那里呢？我试着搜索一下，但不幸的是，由于版本控制系统，术语“回复”和“填充”一起出现在一起。
2. 是否有任何其他方式与CSS做到这一点？我正在寻找使用visibility:hidden;，因为我几乎从未在我的项目中使用visibility属性，但这不会从流中删除元素，而且我也想不出有什么办法可以将其删除其他代码。

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

---

更新：下面标注的答案是一样好，我要拿到现在，但我想更新我结束了使用的代码这个问题。我不知道如何这会工作，考虑到我经常使用最大高度，但希望它不会经常发生冲突：

._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

1. 是否有任何填充工具了那里呢？我试着四处搜寻，但不幸的是，由于版本控制系统，术语“回复”和“填充”一起出现在一起。

可能不是。 revert回滚级联，这是一个不平凡的事情。

此外，我不确定这会对您的情况有所帮助。你用display: flex设计一个元素，但display: none获得级联。如果我理解正确，你想撤消display: none并得到display: flex。然而，revert

回滚级联到用户层面，使仿佛没有作者级规则是为 该属性指定的specified value计算。

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

取而代之，当您想将display重置为默认行为时，display: revert会很有用。 block for <div>，table-cell for <td>，inline for <span>。

1. 是否有任何其他方式使用CSS来做到这一点？我正在寻找使用visibility:hidden;，因为我几乎从不在我的项目中使用visibility 属性，但这并不会从 流程中删除元素，我也想不出任何方法将其删除 与其他代码冲突。

是的。正如你怀疑的，display: none是一个本来不应该存在的古怪。 CSS Display Level 3解决这个问题通过引入新的属性，称为box-suppress：

的display: none值历史用作显示和隐藏的元件之间的“切换”到 开关。制作此可逆 需要仔细设置CSS cascade或 记住display值设置为 none之前的值。为了简化此常见用例，此模块 引入了单独的box-suppress属性以执行相同的 操作，以便切换格式化树中是否出现元素现在可以在不影响其显示类型 的情况下完成显示为。

“唯一”的问题是没有主要的浏览器都支持box-suppress。

与此同时，最好的方法是仅在需要时才应用display: none，以便您不必撤消它。在你的榜样，

.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; 
 
    } 
 
}

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