:focus和:active伪类之间有什么区别?
:focus
:active
:focus和:active是两个不同的状态。
例如,假设我们有一个<button>。该<button>不会有开始与任何国家。它只是存在。如果我们Tab过去将赋予“焦点” <button>,它现在将进入其:focus状态。如果然后单击(或按space),则使按钮进入其(:active)状态。
<button>
Tab
space
关于这一点,当您单击某个元素时,将其赋予焦点,这也会培养出:focus和: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>