css - :focus-within when focusing first child but not the last

Question

我有一个 <section>只有当第一个子元素获得焦点而不是第二个子元素时，我才想在其中设置焦点的元素。我尝试使用 :not伪类，但没有成功。

值得注意的是，我仍然需要关注第二个元素，只是不想有两个焦点元素(父 + 子)，如下例所示。

Codepen example

如果只有 HTML/CSS 破解/解决方案就更好了。

Answer 1

":focus-within"使父元素拥有焦点，如果它的任何子元素本身有焦点的话。您不能仅使用 css 执行此操作，因为您只能选择兄弟元素或子元素，除了选择父元素的这种不寻常情况(即使您无法选择哪个元素在内部具有焦点)。您正在将焦点应用到该部分，而不是 child 。