327

:focusと:active疑似クラスの違いは何ですか?

4

7 に答える 7

481

:focusと:activeは 2 つの異なる状態です。

  • :focus要素が入力を受け取るために現在選択されているときの状態を表し、
  • :active要素が現在ユーザーによってアクティブ化されているときの状態を表します。

たとえば、 があるとしましょう<button>。そもそも状態は<button>ありません。存在するだけです。Tabに「フォーカス」を与えるために使用すると<button>、その:focus状態になります。次にクリック (または を押すspace) すると、ボタンが ( :active) 状態になります。

:focusその点で、要素をクリックすると、それにフォーカスが与えられます。これにより、と:activeが同じであるという錯覚も育まれます。それらは同じではありません。ボタンをクリックすると、:focus:active状態になります。

例： 

<style type="text/css">
  button { font-weight: normal; color: black; }
  button:focus { color: red; }
  button:active { font-weight: bold; }
</style>
  
<button>
  When clicked, my text turns red AND bold!<br />
  But not when focused only,<br />
 where my text just turns red
</button>

編集：jsfiddle

于 2009-11-05T02:51:24.810 に答える
64 
:active       Adds a style to an element that is activated
:focus        Adds a style to an element that has keyboard input focus
:hover        Adds a style to an element when you mouse over it
:lang         Adds a style to an element with a specific lang attribute
:link         Adds a style to an unvisited link
:visited      Adds a style to a visited link

出典: CSS 疑似クラス

于 2009-11-05T02:50:22.000 に答える
29

4つのケースがあります。

  1. デフォルトでは、アクティブとフォーカスは両方ともオフです。
  2. フォーカス可能な要素を切り替えるためにタブを押すと、それらは（アクティブなしで）入ります。:focus
  3. フォーカス不可能な要素をクリックすると、 （フォーカスなしで）入ります。:active
  4. フォーカス可能な要素をクリックすると、その要素が入ります(アクティブで同時にフォーカスされます)。:active:focus

例：

<div>
  I cannot be focused.
</div>

<div tabindex="0">
  I am focusable.
</div>

div:focus {
  background: green;
}

div:active {
  color: orange;
}

div:focus:active {
  font-weight: bold;
}

ページが読み込まれると、どちらもケース 1 になります。タブを押すと、2 番目の div がフォーカスされ、ケース 2 が表示されます。最初の div をクリックすると、ケース 3 が表示されます。2 番目の div をクリックすると、ケース 4 が表示されます。 .

要素がフォーカス可能かどうかは別の問題です。ほとんどはデフォルトではありません。<a>ただし、 、<input>、<textarea>はデフォルトでフォーカス可能であると想定しても問題ありません。

于 2015-10-13T10:31:14.377 に答える
7

:focus は、要素が入力 (入力ボックス内のカーソルまたはタブで移動されたリンク) を受け入れることができるときです。

:active は、要素がユーザーによってアクティブ化されているときです。ユーザーがマウス ボタンを押してから離すまでの時間です。

于 2009-11-05T02:47:05.503 に答える
-6

「フォーカス」を使用すると、キーボード ユーザーは、マウスでホバーしたときにマウス ユーザーが得るのと同じ効果を得ることができます。Internet Explorer で同じ効果を得るには、「アクティブ」が必要です。

実際には、これらの状態は、すべてのユーザーにとって正常に機能するとは限りません。3 つのセレクターをすべて使用しないと、物理的にマウスを使用できない多くのキーボードのみのユーザーにアクセシビリティの問題が生じます。#nomouse チャレンジ (nomouse dot org) にぜひご参加ください。

于 2015-06-18T23:22:08.503 に答える