当子元素只有:focus-visible时，如何获取父元素:focus-within？

Question

当子元素只有焦点可见时，如何让父元素获得焦点？

我希望父母在通过键盘聚焦孩子时获得轮廓。但是当我单击标签或复选框时，这段代码始终具有焦点（轮廓）。

我该怎么做？我正在努力

.parent:focus-within:not(:focus){ ~~ }

但是失败了。

这是我的代码：

.parent:focus-within {
    outline: red auto 1px;
}
.child:focus {
    outline-color: red;
}
.child:focus:not(:focus-visible) {
    outline: 0;
}

<pre>
<label class="parent">
  <input type="checkbox" class="child">
</label>
</pre>

Answer 1

:focus-within

，但可以使用

:has()

.parent:has(:focus-visible) {
  outline: red auto 1px;
}

.child:focus {
  outline-color: red;
}

.child:focus:not(:focus-visible) {
  outline: 0;
}

<pre>
<label class="parent">
  <input type="checkbox" class="child">
</label>
</pre>

:has()