使用input::checked结合:has伪类控制元素显示失效，求解决方案

问题原因 #

你的CSS代码存在两个关键错误：

1. 伪类写法错误：::checked是伪元素的语法，判断复选框选中状态需要用单冒号的:checked伪类（双冒号仅用于::before、::after这类伪元素）。
2. 选择器可更精准：原选择器依赖:has伪类，虽然主流浏览器已支持，但利用兄弟选择器能更直接关联复选框与目标span元素。

修正后的代码 #

CSS部分

.share_div {
  width: 200px;
  height: 100px;
  left: 0.7rem;
  width: 50%;
  height: 100px;
  position: absolute;
  background-color: #aaa;
  border: 2px solid black;
  padding-inline: 10px;
  border-radius: 100vmax;
}

.share_div label {
  display: block;
  font-size: 0.85rem;
  color: black;
  margin-inline-start: 2rem;
  margin-block-start: 0.5rem;
}

#actuall_link {
  display: none;
  width: calc(100% - 5rem);
  height: 2.2rem;
}

/* 用相邻兄弟选择器直接关联选中的复选框和span，逻辑更直接 */
#checkbox_share:checked + #actuall_link {
  display: inline;
}

/* 若坚持使用:has写法，仅修正伪类语法即可 */
/* #share_div:has(>input:checked) #actuall_link {
  display: inline;
} */

HTML部分（无需修改）

<div id="share_div" class="share_div">
  <label for="checkbox_share">info</label>
  <input id="checkbox_share" type="checkbox">
  <span id="actuall_link">unhide when checkbox is checked</span>
</div>

补充说明 #

• 相邻兄弟选择器+会精准选中紧跟在选中复选框后的span元素，逻辑清晰且兼容性更广。
• 若需兼容老旧浏览器，优先选择兄弟选择器方案；:has伪类属于较新特性，部分旧版浏览器不支持。

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