活跃状态和聚焦状态之间的关系[重复]

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>

如果您单击该链接，您会看到它的颜色从蓝色/紫色变为绿色。您不会看到活动状态，即黄色。

然后，让我们尝试从我们的 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>

现在，当我们点击链接时，它的活动状态是成功可见的。即，链接的颜色从蓝色/紫色变为黄色，持续 1 秒。

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

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

Answer 1

简单地说，当你点击链接时，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>

相关问题/答案：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>

Answer 2

这两个例子没有区别……

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