css - タブのアンカーリンクを強調表示しないフォーカス

Question

1 つを除くすべてのアンカー リンクは、1 つを除いてフォーカス時に背景色が変更されます。

HTML

<a id="login-as-guest">Cancel and browse as guest</a>

CSS

#login-as-guest a:focus{ background-color: yellow; }

何か案は？

Answer 1

フォーカスを使用するには、入力ではないため、要素に tabindex を割り当てる必要があります。それ以外の場合は、を使用できますactive。また、あなたのコードは正しくありません。a現在、それを持つ要素内の要素を探していIDます。

正しい方法は

a#login-as-guest:focus{ background-color: yellow; }

両方の方法: デモhttp://jsfiddle.net/kevinPHPkevin/t2hbS/

Answer 2

href 属性のないアンカー タグはフォーカスを受け取ることができません (少なくとも Chrome では、標準的な動作だと思います)。aまた、セレクタが正しくありません。の子孫であるを選択しようとしています#login-as-guest。セレクターは である必要があります。これは、フォーカスがある の ID を持つa#login-as-guest:focusを選択します。a#login-as-guest

更新されたフィドルをご覧ください: http://jsfiddle.net/VKvBy/1/