有没有办法在显示其他元素时仅使用 CSS 隐藏元素？答案

【问题标题】：Is there a way using only CSS to hide an element when other is displayed?有没有办法在显示其他元素时仅使用 CSS 隐藏元素？
【发布时间】：2021-07-11 09:00:39
【问题描述】：

我有这个 HTML 代码：

<div class="content">   
    <div id="loading-bar-container"></div>
        <div data-ng-view> </div>
    </div>
</div>

目前，id为loading-bar-container的div在页面加载时自动显示，在页面完全加载时隐藏（它是一个加载栏）。这是通过使用 JQuery 动态更改此元素的 CSS 属性 display 的值来实现的。

现在我还希望在显示加载栏时，自动隐藏下面的 div (div data-ng-view)，因此在加载页面之前不会显示此 div。我想只使用 CSS+HTML 来实现这种行为。

【问题讨论】：

您可以使用 CSS 选择同级元素，但 CSS 无法真正“检查”元素当前是否正在显示的状态。（如果使用属性选择器将 display 属性设置为内联样式，它可能可能会起作用。但这将非常繁琐，并且很容易分解，如果其他东西添加了其他内联样式。）
你能改变 jquery 来在 loading-bar-container 上设置一个类，而不是直接改变它的样式吗？这样，它的兄弟 data-ng-view 可以仅使用 CSS 将其拾取并显示。

标签： html css angularjs

【解决方案1】：

只需像这样修改顶部的父元素：

.content #loading-bar-container {
  display: none;
}
.content > div[data-ng-view] {
  display: block;
}

.content.is-loading #loading-bar-container {
  display: block;
}
.content.is-loading > div[data-ng-view] {
  display: none;
}

<!-- Toggle 'is-loading' class on loading, and remove it after loaded -->
<div class="content is-loading">   
    <div id="loading-bar-container">Loading</div>
    <div data-ng-view>Loaded</div>
</div>

【讨论】：