如何使用:has()选择器定位带有input同级元素的label标签？

你的代码不生效主要有两个原因：

• CSS语法错误：visibility属性的写法不符合规范，必须用冒号分隔属性名和属性值，正确写法是 visibility: hidden;，你当前代码里少了冒号，浏览器无法解析这个样式规则。
• 浏览器兼容性问题：:has()选择器属于CSS选择器 Level 4 的特性，仅在较新版本的浏览器中支持（比如Chrome 105+、Firefox 121+、Safari 15.4+），如果你的浏览器版本过低，也会导致选择器无法生效。

修正后的CSS代码如下：

label:has(~input) {
  visibility: hidden;
}

使用这段修正后的代码，第一个<div>里的<label>会被正确隐藏，第二个<div>里的<label>不受影响。

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