能否仅用CSS实现：加载条显示时自动隐藏下方ng-view容器？

完全可以仅靠现有HTML结构+CSS实现需求，不需要额外写任何JavaScript控制逻辑，也不需要改动原有jQuery控制加载条显隐的代码。核心逻辑是利用CSS的兄弟选择器，直接匹配现有加载条的显隐状态做联动。

实现基础 #

你当前的DOM结构里，#loading-bar-container和[data-ng-view]同属.content父级下的子节点，两者是直接相邻的关系。当jQuery动态修改#loading-bar-container的display属性切换显隐时，浏览器会自动重新匹配关联的CSS规则，整个联动过程不需要额外的状态监听代码。

具体CSS实现 #

/* 核心联动规则：加载条处于显示状态时，直接隐藏下方的路由容器 */
#loading-bar-container:not([style*="display: none"]) + [data-ng-view] {
  display: none;
}

/* 路由容器默认样式：加载条隐藏后自动恢复正常显示 */
[data-ng-view] {
  display: block; /* 这里的显示值和你项目里原本给ng-view设置的默认样式保持一致即可 */
}

细节调整 #

• 如果原来的jQuery不是直接修改行内display属性，而是通过给加载条加class类（比如.hidden类）控制显隐，就把选择器换成类匹配的形式，匹配效率更高：

  #loading-bar-container:not(.hidden) + [data-ng-view] {
    display: none;
  }
  

• 如果后续DOM结构调整，加载条和路由容器之间插入了其他元素，只需要把相邻兄弟选择器+换成通用兄弟选择器~，就能正常匹配到路由容器，不用改其他逻辑。

方案特点 #

• 完全不侵入原有加载条的控制代码，没有额外JS运行开销
• 状态联动是浏览器自动触发的，不会出现加载条和路由容器显隐不同步的问题
• 代码量极少，后续维护成本很低

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