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

Question

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

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

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

1 当具有 .whenRolledUp class 的元素位于 DOM 层次结构中并且具有具有 class 的元素时.rolledDown 在层次结构中高于其自身的某处我想禁用元素。否则，我不想对元素的显示做任何事情。我可以借助 css:

来满足这个要求

.rolledDown .whenRolledUp {
    display: none;
}

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

.whenRolledDown {
    display: none;
}

但这就是陷阱。我不能只用这个来满足第一部分：

.rolledDown .whenRolledDown {
    display: block;
}

因为这里我实际上是将显示设置为阻塞，而如果没有这个 css.

它可能会有不同的值

看来这个问题只用css是解决不了的。是这样吗？

Answer 1

您可以使用 display: unset:

The unset CSS keyword resets a property to its inherited value if it inherits from its parent, and to its initial value if not.

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>

Unset css property in css. Is it possible?