如何不使用display:none或JS 仅用纯CSS隐藏div等HTML元素

所有方案均不依赖JavaScript、不使用display: none属性，可覆盖普通div元素、指定Sync触发按钮a标签的隐藏需求，可根据实际场景选择：

• visibility: hidden 方案
  元素会保留原有文档流占位，仅视觉不可见，无法响应点击、hover等任何交互事件，全浏览器兼容，适合需要保留元素位置、不触发交互的隐藏场景。
  参考代码：

  /* 隐藏普通div */
  div {
    visibility: hidden;
  }
  /* 隐藏指定Sync按钮a标签 */
  a.btn.btn-warning.btn-xs[data-target="#myModalSync"] {
    visibility: hidden;
  }
  

• opacity: 0 透明方案
  元素保留原有文档流占位，视觉上完全透明，默认状态下仍可响应交互事件，搭配pointer-events: none可彻底屏蔽交互，适合需要做淡入淡出动画过渡的隐藏场景。
  参考代码：

  /* 隐藏普通div并屏蔽交互 */
  div {
    opacity: 0;
    pointer-events: none;
  }
  /* 隐藏指定Sync按钮a标签 */
  a.btn.btn-warning.btn-xs[data-target="#myModalSync"] {
    opacity: 0;
    pointer-events: none;
  }
  

• 绝对定位移出可视区方案
  元素脱离正常文档流，不会占据原有布局位置，被移动到屏幕可视范围外，无法触发交互，适合不需要元素占位、彻底隐藏的场景。
  参考代码：

  div,
  a.btn.btn-warning.btn-xs[data-target="#myModalSync"] {
    position: absolute;
    left: -99999px;
    top: -99999px;
  }
  

• 裁剪隐藏方案
  可通过clip或clip-path属性将元素可视区域裁剪为0，元素如果用绝对定位则不占文档流，用相对定位则保留占位，无法响应交互，是无障碍适配场景下常用的隐藏方案。
  参考代码：

  div,
  a.btn.btn-warning.btn-xs[data-target="#myModalSync"] {
    position: absolute;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    width: 1px;
    height: 1px;
    overflow: hidden;
  }
  

• 宽高归零方案
  将元素宽高、内外边距、边框全部设为0，搭配overflow: hidden隐藏溢出内容，元素不会占据布局空间，完全不可见。
  参考代码：

  div,
  a.btn.btn-warning.btn-xs[data-target="#myModalSync"] {
    width: 0;
    height: 0;
    padding: 0;
    margin: 0;
    border: none;
    overflow: hidden;
  }
  

选型提示：如果仅需要简单视觉隐藏、不关心占位和交互，优先选visibility: hidden实现成本最低；如果需要适配屏幕阅读器等无障碍访问场景，优先选裁剪隐藏或移出视口方案。

内容的提问来源于stack exchange，提问作者Đỗ Ngọc Sơn