使用checkbox hack实现对话框点击X关闭失效问题排查

你写的关闭逻辑不生效，核心是两个CSS认知错误，和你提到的嵌套结构直接相关：

• 首先你搞错了通用兄弟选择器~的作用范围：这个选择器只能选和当前元素同属一个父级、且排在当前元素后面的同级节点。你现在把#closeCheck塞在.tooltiptext容器内部，它的同级元素只有关闭按钮的label、弹窗标题、正文，根本选不到作为它父元素的.tooltiptext，所以你写的#closeCheck:checked ~.tooltiptext从一开始就匹配不到任何元素，当然没效果。
• 其次就算你调整DOM结构让选择器能命中，两个独立checkbox的状态也是互不关联的：点X把#closeCheck勾上之后，控制弹窗打开的#clickhere还保持选中状态，下次再点"click here"不会触发状态切换，弹窗直接就打不开了。

纯CSS用checkbox hack做这种开关根本不需要两个checkbox，把关闭按钮的label直接绑定到控制打开的#clickhere上就行，额外加关闭用的checkbox完全是多余的。
核心HTML改完是这样：

<div style="height:100px">

</div>

<div class="tooltip">
        <input type="checkbox" id="clickhere" />
        <label for="clickhere">
           <div class="click-msg">click here</div>
        </label>
        <div class="tooltiptext">
            <!-- 关闭按钮直接绑定打开弹窗的checkbox，点它就会取消选中状态 -->
            <label for="clickhere" class="close">
                X
            </label>
            <h1 class="tooltip-title">should open on click</h1>
            <p class="tooltip-msg"> close when X is clicked</p>
        </div>
</div>

CSS部分把所有和#closeCheck相关的规则全删掉，统一用#clickhere的状态控制弹窗显隐就行，注意别混着用display:none和visibility:hidden，很容易出现优先级冲突导致样式异常：

#clickhere {
  display: none;
}

.tooltiptext {
  /* 默认隐藏 */
  display: none;
  width: 120px;
  background-color: black;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;
  position: absolute;
  z-index: 1;
  width: 120px;
  bottom: 150%;
  left: 80%;
  margin-left: -60px;
}

/* checkbox选中时显示弹窗 */
#clickhere:checked ~ .tooltiptext {
  display: block;
}

.click-msg{
 font-weight: 400;
font-size: 10px;
line-height: 20px;
}

.tooltip-title {
font-weight: 700;
font-size: 10px;
line-height: 20px;
}
.tooltip-msg{
  font-weight: 400;
font-size: 10px;
line-height: 20px;
}

.tooltip .close{
  position: absolute;
  top: 5px;
  right: 5px;
  cursor: pointer;
}

.tooltip {
  text-align: right;
  position: relative;
  display: block;
}

.tooltip .tooltiptext::after {
  content: " ";
  position: absolute;
  border-style: solid;
  border-width: 5px;
  top: 100%;
  left: 90%;
  margin-left: -5px;
  border-color: black transparent transparent transparent;
}

原理很简单：label的for属性绑定了哪个input，点击它就会切换哪个input的选中状态，所以关闭按钮直接复用控制弹窗的同一个checkbox，点X的时候就会把checkbox从选中改成未选中，自然就触发隐藏规则了，逻辑简单还不会出现状态不同步的问题。

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