css - :CSS のフォーカス セレクター

Question

JSFiddle (*:focusルールは、どの要素がフォーカスを持っているとマークされているかを示すことです。)

私が疑問に思っているのは、メニュー項目をクリックするとフォーカスが得られるのはなぜですか...しかし、メニュー項目をクリックしてもフォーカスが得られないのです。

このように動作させる CSS の何が問題なのですか?

Answer 1

ちょっとしたコツがあります。デフォルトでフォーカスが有効になっていないアイテムが必要な場合は、そのアイテムを設定してタブ可能にする必要がありますtabindex="N"-Nは数字です。それと同じくらい簡単です。クリック可能な項目に tabindex を追加すると、クリックしたときにフォーカスが得られます。タグをタブで移動できる場合は、フォーカスを取得できる必要があります。ロードしたtabindex場合、メニューのすべてのノードに属性を追加するのは非常に簡単です。jQuery

$(function() { 
  $('#navbar *').attr('tabindex', '1');
});

すべてが整ってきます。もちろん、純粋な JavaScript を使用して実行できます。

Answer 2

focusは通常、キーボードまたはその他の入力を受け取ることができる要素のみを対象としているため、このヒューリスティックliでは s は適格ではありません。この質問には詳細があります。.

仕様では、CSS はどの要素がそれらの状態になり得るかを明示的に定義していませんfocus。

あなたの目的に合うと思われるのはactiveで、ここで見ることができます。