如何仅当CSS变量已声明时用其覆盖元素的display属性

你的需求完全可行，问题出在var()的回退值设置上，以下是两种靠谱的实现方式：

方式一：给var()指定正确的回退值 #

直接把回退值设为flex，和Bootstrap的.d-flex保持一致，这样当--display变量未定义时，元素会保留flex布局：

.d-flex {
  display: flex; /* Bootstrap默认样式 */
}

.my-item {
  display: var(--display, flex); /* 变量未定义时用flex作为回退 */
}

.container.hide-items {
  --display: none !important;
}

你之前尝试的unset和initial无效是因为：

• initial会让display回到CSS初始值inline，这不是你要的结果
• unset对于非继承属性（比如display），效果和initial一致，同样会变成inline

方式二：直接通过选择器控制（无需CSS变量） #

如果不需要用CSS变量的话，这种方式更直接，避免变量回退的问题：

.d-flex {
  display: flex; /* Bootstrap默认样式 */
}

.container.hide-items .my-item {
  display: none !important;
}

当容器有hide-items类时，直接给内部的.my-item设置隐藏样式，没有该类时，元素自然继承.d-flex的flex布局。

内容的提问来源于stack exchange，提问作者Luke Vo