Don＆＃039; t Commaseparate：深いブラウザのサポートが必要な場合はフォーカスで

The :focus-within非常に便利です。その子孫のいずれかが焦点を合わせて、アクセシビリティを向上させたときに、親要素をスタイリングすることができます。

追加のコンテンツを表示したいシナリオを検討してください<div>ホバリングされています：<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"> div：Hover .extra-stuff { / *それを明らかにする */ }</pre><div class="contentsignin">ログイン後にコピー</div></div> <p>これはキーボードに優しいものではありません。 <code>.extra-stuff内の要素がtabbable（フォーカス可能）である場合、よりアクセスしやすいアプローチ:focus-within組み合わされます:hover

 Div：Hover .Extra-Stuff、
div：フォーカスウィチン.extra-stuff {
  / *それを明らかにする */
}

ただし、これは挑戦です。サポートしないブラウザ:focus-withinセレクター全体を無視し、 :hover機能も失います。

より安全ですが、繰り返しの解決策は次のとおりです。

 div：Hover .extra-stuff {
  / *それを明らかにする */
}
div：フォーカスウィチン.extra-stuff {
  / *それを明らかにする */
}

クリーナーコード、特にSASSのような前処理者を使用すると、ミキシンを使用できます。

 @mixin reveal {
  .extra-stuff {
     変換：翻訳（0）;
  }
}

Div：Hover {
  @include reveal;
}

div：フォーカス{{
  @include reveal;
}

これは、コード組織と保守性を改善するためのCSSミクシンの実用的なアプリケーションを示しています。

以上がDon＆＃039; t Commaseparate：深いブラウザのサポートが必要な場合はフォーカスでの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。