Question

为什么这行不通？具体来说，我正在尝试在div中显示一些文本，如果其中包含隐藏的表单...

<div data-vc-full-width="true" data-vc-full-width-init="true" data-vc-stretch-content="true" class="vc_row wpb_row vc_row-fluid vc_row-no-padding" style="position: relative;/* left: -88.5px; */box-sizing: border-box;width: 100%;">

form.hidden {
  display: none;
}

div:has(form.hidden)::before {
  color: red;
  font-size: x-large;
  content: 'This DIV has a hidden FORM';
}

Answer 1

:has()是一项实验性功能，尚无浏览器支持。请参阅浏览器兼容性图表：https://developer.mozilla.org/en-US/docs/Web/CSS/:has

该规范还表明它不能在样式表中使用：

：has（）伪类将选择器列表作为参数。在当前规范中：没有被标记为实时选择器配置文件的一部分，这意味着它不能在样式表中使用；仅适用于document.querySelector（）之类的功能。

在CSS中使用：has和:: before

1 个答案: