不要分開逗號：如果需要深層瀏覽器支持

:focus-within CSS偽級非常方便。它使您可以在任何一個後代有重點的過程中設計樣式，從而增強可訪問性。

考慮一個方案，您想在某些情況下顯示其他內容<div>懸停：<pre class="brush:php;toolbar:false"> div：懸停.extra-stuff { / *揭示它 */ }</pre> <p>這不是很友好。如果<code>.extra-stuff中的元素是可撥打的（焦點），則更易於訪問的方法結合了:hover :focus-within ：

 div：懸停.extra-stuff，
div：focus-within .extra-stuff {
  / *揭示它 */
}

但是，這提出了一個挑戰。不支持的瀏覽器:focus-within將忽略整個選擇器，也會丟失:hover功能。

更安全的，雖然重複性的解決方案是：

 div：懸停.extra-stuff {
  / *揭示它 */
}
div：focus-within .extra-stuff {
  / *揭示它 */
}

對於清潔代碼，尤其是對於Sass等預處理器，您可以使用Mixins：

 @mixin揭示{
  .extra-stuff {
     變換：translatey（0）;
  }
}

DIV：懸停{
  @include揭示；
}

div：焦點 -  {
  @include揭示；
}

這證明了CSS Mixins的實際應用，以改善代碼組織和可維護性。