CSS的:focus-within样式无法添加边框问题咨询

你的代码里:focus-within的逻辑是对的，但按钮聚焦时.accordion没显示边框，核心问题是**.accordion元素默认没有边框样式**。border-color属性只有在border-style不为none时才会生效，默认状态下元素的border-style是none，所以修改颜色也看不到效果。

先搞懂:focus-within的工作逻辑 #

这个CSS伪类的触发条件很简单：当元素自身获得焦点，或者它的任意后代元素获得焦点时，就会应用对应的样式。你的按钮是.accordion的后代，所以只要.accordion有可显示的边框，聚焦时就能看到颜色变化。

修复代码 #

给.accordion添加初始边框样式即可，示例如下：

CSS 代码

.accordion {
  /* 设置初始边框，这里用透明色避免默认显示边框 */
  border: 1px solid transparent;
  /* 可选：添加内边距让布局更舒服 */
  padding: 8px;
  margin: 8px 0;
}

.accordion:focus-within {
  border-color: blue;
}

完整HTML 代码

<div class="accordion">
 <h3>
  <button>First button</button>
 </h3>
 <h3>
  <button>Second button</button>
 </h3>
 <h3>
  <button>Third button</button>
 </h3>
</div>
<div class="accordion">
 <h3>
  <button>4th button</button>
 </h3>
 <h3>
  <button>5th button</button>
 </h3>
 <h3>
  <button>6th button</button>
 </h3>
</div> 

<div class="accordion">
<h3>
  <button>7th button</button>
 </h3>
<h3>
  <button>8th button</button>
 </h3>
<h3>
  <button>9th button</button>
 </h3> 
</div>

如果不想用透明初始边框，也可以设置默认灰色边框，聚焦时切换为蓝色，效果一致。另外，:focus-within支持所有现代浏览器，无需担心兼容性问题。

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