时间戳

首页 > 解决方案 > 在 css 中取消设置 css 属性。是否可以？

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

问题描述

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

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

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

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

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

.rolledDown .whenRolledUp {
    display: none;
}

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

.whenRolledDown {
    display: none;
}

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

.rolledDown .whenRolledDown {
    display: block;
}

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

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

标签： htmlcssdomdisplay

解决方案

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

推荐阅读