html - 在 css 中取消设置 css 属性。是否可以？

Question

在 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是解决不了的。是这样吗？

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>