details元素:focus伪类触发时样式不生效问题求助

尝试使用details:focus为获得焦点的<details>元素设置样式时，该选择器无法生效，但<button>、<input>等元素的:focus样式可正常工作。

原因分析 #

<details>元素默认不属于可聚焦元素（无默认tabindex值）：

• 按Tab键切换焦点时，不会聚焦到<details>本身；
• 点击<summary>时，焦点仅落在<summary>元素上，而非外层的<details>。
  这直接导致details:focus选择器无法匹配到任何状态。

解决方案 #

根据需求可选择以下两种方案：

方案1：给details添加tabindex属性 #

给<details>设置tabindex="0"，使其成为可聚焦元素，此时Tab键能选中它，details:focus即可正常触发样式。

修改后的HTML：

<input type="text" value="按Tab键切换焦点">

<details tabindex="0">
  <summary>聚焦时应显示蓝色外框</summary>
  
  <p>
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Modi, ex facilis iusto. Ab laboriosam deserunt neque fuga reprehenderit, inventore non? Quo sint iusto commodi architecto magni sit maiores beatae exercitationem.
  </p>
</details>

<button>聚焦时应显示蓝色外框</button>

CSS部分无需修改，details:focus会在元素获得焦点时生效。

方案2：使用:focus-within伪类 #

若希望<details>内部元素（如<summary>）获得焦点时，给<details>添加样式，可使用:focus-within伪类——它会匹配包含焦点元素的父容器，恰好适配<details>与<summary>的嵌套场景。

修改后的CSS：

/* 替换原有的details:focus */
details:focus-within {
  box-shadow:0 0 0 2px blue;
}

此方式无需修改HTML，当<summary>被点击或通过Tab键聚焦时，<details>会自动应用目标样式。

补充说明 #

• :focus仅匹配自身获得焦点的元素；
• :focus-within匹配包含焦点元素的父元素，更适合组件容器类的样式需求；
• tabindex="0"会让元素加入Tab键的焦点遍历顺序，tabindex="-1"允许通过JS聚焦但不会被Tab键选中。

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