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

Question

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

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

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

我希望我的元素遵守以下规则：

1当具有.whenRolledUp类的 element 位于DOM层次结构中，并且在层次结构中位于其上方某位置的元素具有.rolledDown类的元素时，我想禁用元素。否则，我不希望显示 element 的任何内容。我可以借助此CSS来满足此要求：

.rolledDown .whenRolledUp {
    display: none;
}

2当具有.whenRolledDown类的 element 位于DOM层次结构中，并且在层次结构中位于自身上方的某个地方具有类.rolledDown的元素时，我什么也不想做到元素的显示。否则，我想显示：元素没有显示。我可以使用此方法满足第二部分的要求：

.whenRolledDown {
    display: none;
}

但这是要抓住的地方。我不能只用这个来满足第一部分：

.rolledDown .whenRolledDown {
    display: block;
}

因为在这里，我实际上是将显示设置为“阻止”，而如果没有此CSS，它可能具有不同的值。

似乎仅靠CSS无法解决问题。是吗？

Answer 1

您可以使用display: 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>