活跃状态和专注状态之间的关系

Question

目前我正在尝试了解 :active 和 :focus 伪类如何相互关联。

这是我的例子：

<a href="http://google.com" target="_blank">Google</a>

<style>
    a:link    { color: rgb(0, 138, 206);  } /* Blue */
    a:visited { color: rgb(180, 14, 180); } /* Violet */
    a:active  { color: yellow; }
    a:focus   { color: green;  }
</style>

如果您点击 link，您会看到它的颜色从 blue/violet 变为绿色。您将看不到活动状态，即黄色。

然后，让我们尝试从 CSS:

中删除 a:focus

<style>
    a:link    { color: rgb(0, 138, 206);  } /* Blue */
    a:visited { color: rgb(180, 14, 180); } /* Violet */
    a:active  { color: yellow; }
</style>

现在，当我们点击link，它的活动状态就成功可见了。即，link 的颜色从 blue/violet 变为黄色，持续 1 秒。

我不问 :active 和 :focus 伪类之间的区别 - 当然，我知道。

我的问题是关于为什么我们在第一个示例中看不到 :active 状态（黄色）。

Answer 1

这两个例子没有区别...

当您单击元素时 :active 状态有效...

...:focus 在您单击元素后起作用...

仔细看，点<a>的时候先变成yellow再变成green...

在 :focus 中添加一些过渡延迟...您会知道其余的

堆栈片段

a:link {
  color: blue;
}

a:visited {
  color: voilet;
}

a:active {
  color: yellow;
}

a:focus {
  color: green;
  transition: all .3s ease 2s;
}

<a href="javascript:void(0)" target="_blank">Google</a>

Answer 2

简单的说，当你点击link时，active和focus状态都会触发。因此，如果您想同时查看 active 和 focus 状态，则 active 必须位于 focus:

下方

<a href="#">
    You will see both active and focus states
</a>

<style>
    a:focus   {
                color: green;
                margin-left: 20px;
    }

    a:active  {
                color: yellow;
                background-color: black;
    }

    /*
    Click on the link, but don't release mouse button.
    You will see, that the link have:
    - yellow text on black background
    - indent

    Then, release mouse button.
    You will see, that the link have:
    - green text
    - indent

    That's fine!
    */
</style>

请注意，active 必须位于 focus 下方，正如我已经说过的。如果您尝试更改顺序，您将看不到黄色文本 - 它始终为绿色，因为 focus 覆盖了 active。让我们举个例子：

<style>
    /* Incorrect: */

    a:active  {
                color: yellow;
                background-color: black;
    }

    a:focus   {
                color: green;
                margin-left: 20px;
    }
</style>

相关question/answer：What is the difference between :focus and :active?（不过，从我的角度来看，我的回答更容易理解）。

编辑：

所以，回到我原来的例子，有必要改变 active 和 focus 行的顺序：

<a href="#">Test me</a>

<style>
    a:link    { color: rgb(0, 138, 206);  } /* Blue */
    a:visited { color: rgb(180, 14, 180); } /* Violet */
    a:focus   { color: green;  }
    a:active  { color: yellow; }
</style>

活跃状态和专注状态之间的关系

Relationship between active and focused states

html

css

hyperlink

css-selectors

pseudo-class