我不明白專注是如何工作的。我想在按鈕聚焦時添加一個邊框。這是最小的工作示例。為什么它不在按鈕焦點上的div周圍添加邊框？

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

<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>

你現在忘記添加一些邊框，所以把它變成藍色不會改變任何事情。以下代碼應該有助于您繼續前進:

.accordion:focus-within {
  border-color: blue;
  border-style: solid;
  border-width: 5px;
}

你看，當按鈕被聚焦時，藍色的5px厚的實心邊框就形成了。