:focus和:active伪类之间有什么区别
:focus和:active是两种不同的状态
:焦点表示当前选择元素以接收输入和输出时的状态:active表示用户当前激活元素时的状态
例如,假设我们有一个<;按钮>。<;按钮>将不会有任何状态开始。它只是存在。如果我们使用选项卡为提供“焦点”<;按钮>,它现在进入其:焦点状态。如果然后单击(或按空格),则会使按钮进入其(:活动)状态
注意,当你点击一个元素时,你给它焦点,这也培养了一种错觉,即:focus和:active是相同的它们不一样。单击按钮时,按钮处于:焦点:活动状态
例如:
<;style type=“text/css”>;
按钮{字体大小:正常;颜色:黑色;}
按钮:焦点{颜色:红色;}
按钮:活动{字体重量:粗体;}
</风格>;
<;按钮>;
单击时,我的文本将变为红色和粗体&书信电报;br/>;
但不是只专注于某一方面,<;br/>;
我的文字变成红色
</按钮>
编辑:jsfiddle