小编典典

:focus和:active有什么区别?

css

:focus:active伪类之间有什么区别?


阅读 1630

收藏
2020-05-16

共1个答案

小编典典

:focus:active是两个不同的状态。

  • :focus 表示当当前选择该元素以接收输入时的状态,并且
  • :active 表示当元素当前被用户激活时的状态。

例如,假设我们有一个<button>。该<button>不会有开始与任何国家。它只是存在。如果我们Tab过去将赋予“焦点”
<button>,它现在将进入其:focus状态。如果然后单击(或按space),则使按钮进入其(:active)状态。

关于这一点,当您单击某个元素时,将其赋予焦点,这也会培养出:focus:active相同的错觉。 他们不一样。
单击时,按钮处于:focus:active状态。

一个例子:

<style type="text/css">

  button { font-weight: normal; color: black; }

  button:focus { color: red; }

  button:active { font-weight: bold; }

</style>



<button>

  When clicked, my text turns red AND bold!<br />

  But not when focused, where my text just turns red

</button>
2020-05-16