在 css 中取消设置 css 属性。可能吗？答案

【问题标题】：Unset css property in css. Is it possible?在 css 中取消设置 css 属性。可能吗？
【发布时间】：2019-02-28 08:18:57
【问题描述】：

在 css 中取消设置 css 属性。有可能吗？

让我解释一下css代码的问题。

我们手头有两个课程：.whenRolledUp 和 .whenRolledDown。

我希望我的元素符合以下规则：

1 当一个带有.whenRolledUp 类的元素位于DOM 层次结构中并且在层次结构中的某个位置有一个类.rolledDown 的元素我想禁用元素。否则，我不想对元素的显示做任何事情。我能够在这个 css 的帮助下满足这一点：

.rolledDown .whenRolledUp {
    display: none;
}

2 当一个带有.whenRolledDown 类的元素位于DOM 层次结构中并且在层次结构中的某个位置具有一个类.rolledDown 的元素时，我不想对显示做任何事情元素。否则，我希望元素显示：无。我可以使用这个来满足第二部分：

.whenRolledDown {
    display: none;
}

但这就是问题所在。我不能仅仅使用这个来满足第一部分：

.rolledDown .whenRolledDown {
    display: block;
}

因为这里我实际上将显示设置为阻塞，而没有这个 css 可能会有不同的值。

似乎仅使用 css 无法解决此问题。是这样吗？

【问题讨论】：

【解决方案1】：

你可以使用display: unset:

unset CSS 关键字将属性重置为其继承的值，如果它从其父代继承，如果不是，则为其初始值。

function add() {
  document.querySelector('.target').classList.add('rolledDown');
}

.whenRolledUp {
    display: none;
}

.rolledDown .whenRolledUp {
    display: unset;
}

<div class="target">
  <div class="whenRolledUp">whenRolledDown</div>
</div>

<button onClick="add()">Add rolledDown</button>

【讨论】：