焦点只能通过键盘输入来给出，但是一个元素可以同时被鼠标或键盘激活。

如果在链接上使用:focus，则样式规则只适用于按下键盘上的按钮。

使用“焦点”将给键盘用户提供与鼠标用户悬停鼠标时相同的效果。在ie浏览器中需要“Active”来达到同样的效果。

实际情况是，这些状态并不是对所有用户都能正常工作。如果不同时使用这三个选择器，就会导致许多只使用键盘的用户无法使用鼠标。我邀请你参加#nomouse挑战(nomouse dot org)。

焦点只能通过键盘输入来给出，但是一个元素可以同时被鼠标或键盘激活。

如果在链接上使用:focus，则样式规则只适用于按下键盘上的按钮。

: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伪类

:焦点是当一个元素能够接受输入-输入框中的游标或已被选项卡指向的链接。

:active是当一个元素被用户激活时——用户按下鼠标按钮和释放它之间的时间。

Active是当用户激活该点时(就像鼠标点击一样，如果我们使用tab从字段到字段，则没有来自Active样式的标志。也许点击需要更多的时间，只是尝试按住点击点)，焦点发生在点被激活后。试试这个:

<style type="text/css">
  input { font-weight: normal; color: black; }
  input:focus { color: green; outline: 1px solid green; }
  input:active { color: red; outline: 1px solid red; }
</style>

<input type="text"/>
<input type="text"/>