:focus和:active伪类之间的区别是什么?
当前回答
:焦点是当一个元素能够接受输入-输入框中的游标或已被选项卡指向的链接。
:active是当一个元素被用户激活时——用户按下鼠标按钮和释放它之间的时间。
其他回答
:active Adds a style to an element that is activated
:focus Adds a style to an element that has keyboard input focus
:hover Adds a style to an element when you mouse over it
:lang Adds a style to an element with a specific lang attribute
:link Adds a style to an unvisited link
:visited Adds a style to a visited link
来源:CSS伪类
:焦点是当一个元素能够接受输入-输入框中的游标或已被选项卡指向的链接。
:active是当一个元素被用户激活时——用户按下鼠标按钮和释放它之间的时间。
使用“焦点”将给键盘用户提供与鼠标用户悬停鼠标时相同的效果。在ie浏览器中需要“Active”来达到同样的效果。
实际情况是,这些状态并不是对所有用户都能正常工作。如果不同时使用这三个选择器,就会导致许多只使用键盘的用户无法使用鼠标。我邀请你参加#nomouse挑战(nomouse dot org)。
Active是当用户激活该点时(就像鼠标点击一样,如果我们使用tab从字段到字段,则没有来自Active样式的标志。也许点击需要更多的时间,只是尝试按住点击点),焦点发生在点被激活后。试试这个:
<style type="text/css">
input { font-weight: normal; color: black; }
input:focus { color: green; outline: 1px solid green; }
input:active { color: red; outline: 1px solid red; }
</style>
<input type="text"/>
<input type="text"/>
焦点只能通过键盘输入来给出,但是一个元素可以同时被鼠标或键盘激活。
如果在链接上使用:focus,则样式规则只适用于按下键盘上的按钮。
推荐文章
- 为什么我的CSS3媒体查询不能在移动设备上工作?
- 下一个元素的CSS选择器语法是什么?
- 是否有'box-shadow-color'属性?
- 在jQuery中的CSS类更改上触发事件
- 我如何用CSS跨浏览器绘制垂直文本?
- 如何获得box-shadow在左侧和右侧
- 相对定位一个元素,而不占用文档流中的空间
- 禁用身体滚动
- 使用jQuery动画addClass/removeClass
- 在一个CSS宽度的小数点后的位置是尊重?
- 检测输入是否有文本在它使用CSS -在一个页面上,我正在访问和不控制?
- 我怎么能选择一个特定的类的最后一个元素,而不是父里面的最后一个孩子?
- @media screen和(max-width: 1024px)在CSS中是什么意思?
- 我怎么能检查html元素,从DOM消失失去焦点?
- 谷歌Chrome表单自动填充和它的黄色背景