Question

Currently I'm trying to understand how :active and :focus pseudo-classes related with each other.

Here is my example:

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

If you click on the link, you will see that it's color changed from blue/violet to green. You will not see active state, i.e. yellow.

Then, lets try to remove a:focus from our CSS:

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

Now, when we click on the link, it's active state is successfully visible. I.e., the link's color changed from blue/violet to yellow, for a 1 second.

I don't ask about difference between :active and :focus pseudo-classes - sure, I know it.

My question is about WHY we don't see :active state (yellow) in the 1st example.

Answer 1

There is no difference between those two examples...

The :active state works when you clicked on the element...

...:focus works after you clicked the element...

If you see closely, when you click the <a>, it becomes yellow first and then it will become green...

Add some transition delay in the :focus...you will know the rest

Stack Snippet

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

简单地说，当您点击该链接时，会触发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>

Relationship between active and focused states

2 个答案: