积极和集中状态之间的关系 [英] Relationship between active and focused states
问题描述
目前我正试图理解：active 和：focus 伪类如何相互关联。
以下是我的示例：
< a href = http://google.comtarget =_ blank> Google< / a>
< style>
a：link {color：rgb（0，138，206）; } / *蓝色* /
a：visited {color：rgb（180，14，180）; } / *紫罗兰* /
a：active {color：yellow; }
a：focus {color：green; }
< / style>
如果您点击链接，您会看到它的颜色已从蓝色/紫色更改为绿色。你不会看到活动状态，即黄色。
然后，让我们尝试从我们的CSS中删除 a：focus ： < style>
a：link {color：rgb（0，138，206）; } / *蓝色* /
a：visited {color：rgb（180，14，180）; } / *紫罗兰* /
a：active {color：yellow; }
< / style>
现在，当我们点击链接时，它的活动状态已成功显示。即，链接的颜色从蓝色/紫色变为黄色，持续1秒。 / code>和：focus 伪类 - 当然，我知道它。
我的问题是关于为什么我们在第一个例子中没有看到：active 状态（黄色）。
简单地说，当你点击链接时，触发活动和焦点状态。因此，如果你想看到 active 和 focus 状态， active code>必须位于焦点以下：
< a href =＃>
您将看到活动状态和焦点状态
< / a>
< style>
a：focus {
color：green;
margin-left：20px;
}
a：active {
color：yellow;
背景颜色：黑色;
}
/ *
点击链接，但不释放鼠标按钮。
您会看到，该链接有：
- 黑色背景上的黄色文本
- 缩进
然后，释放鼠标按钮。
您会看到，该链接有：
- 绿色文本
- 缩进
这很好！
* /
< / style>
请注意，有效必须位于下方正如我已经说过的那样， focus 。如果您尝试更改订单，则不会看到黄色文本 - 由于将焦点覆盖活动。我们来举个例子：
< style>
/ *不正确：* /
a：active {
color：yellow;
背景颜色：黑色;
}
a：focus {
color：green;
margin-left：20px;
}
< / style>
相关问题：焦点和：主动？之间有什么区别？（但从我的观点来看，我的答案更容易理解）。 编辑：
活动和焦点行的顺序：
< a href =＃>测试我< / a>
< style>
a：link {color：rgb（0，138，206）; } / *蓝色* /
a：visited {color：rgb（180，14，180）; } / *紫罗兰色* /
a：focus {color：green; }
a：active {color：yellow; }
< / style>
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.
Simply saying, when you click on the link, both active and focus states are triggered. For that reason, if you want to see both active and focus states, active must be located below 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>
Note, that active must be located below focus, as I already said. If you try to change the order, you will not see yellow text - it will be always green, because of overwriting focus over active. Let's show an example:
<style>
/* Incorrect: */
a:active {
color: yellow;
background-color: black;
}
a:focus {
color: green;
margin-left: 20px;
}
</style>
Related question/answer: What is the difference between :focus and :active? (However, from my point of view, my answer is easier to understand).
Edit:
And so, returning to my original example, it was necessary just change the order of active and focus lines:
<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>
这篇关于积极和集中状态之间的关系的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
