CSS visited，hover，active , focus这四个区别

CSS伪类用于向某些选择器添加特殊的效果，在样式表中，各样式排列的顺序很有讲究。

:link 与 :visited 在样式文件中的顺序可以随便放置。

:focus，: hover，:active这几个，如果你设置的顺序不同，会直接影响样式的显示效果。

:focus -> :hover -> :active

有些人可能会困惑，为什么必须要按这样的顺序，而不能打乱呢？其实他们每一个选择器都代表一个含义。

:link代表为访问链接的样式，所以只要你是超链接，且未被访问过，则链接都会按照你设定的样式显示，所以它的位置顺序无所谓。

:visited代表链接访问后的样式，则链接一旦被访问，则之后它的样式就会是你所设置的visited样式。

重点是下面这几个：

:focus 代表的是获取焦点时的样式，有人说啥是获取焦点时的样式，这个我们可以通过tab键来查看，一旦链接获取了焦点，则它的样式就是你设置的focus样式。

:hover 代表的是你光标经过某一元素时的样式，如果将此样式放在:focus之后，则当链接获取焦点时，显示:focus样式，当光标经过此链接时，会显示hover的样式，因为hover排在后，会覆盖focus样式。

如果:hover排在前，:focus排在后，则当光标获得焦点时显示:focus的样式，但当光标经过链接时，样式并未显示:hover的样式，而是继续是:focus的样式，因为应用的focus样式在hover之后，覆盖了前面的样式。

4个属性做用在a标签和button标签上会有明显差异；就是鼠标焦点事件:focus 在button按钮上会有所延迟；延迟时间一般是3秒左右

CSS visited，hover，active , focus这四个区别相关推荐

伪样式：hover ,:active,:focus
<!doctype html>无标题文档姓名: 密码: 转载于:https://www.cnblogs.com/lylcn/p/6789934.html
CSS样式的状态hover、focus、active、link、visited详解
CSS 又名层叠样式表,是一种伪类用于向某些选择的容器添加特殊的效果,所谓层叠,就是后面的样式会覆盖前面的样式,所以不同的排列顺序可能会有不同的显示效果.下面介绍几个关于连接按钮效果的关键样式属性: ...
hover、focus、active、link、visited状态 CSS
hover.focus.active.link.visited状态 CSS 这几个是按钮链接效果的样式属性,不同的排列顺序可能会有不同的展示效果,我们先来看他们分别是干嘛的 link:控制未访问时的显 ...
:link,:visited,:focus,:hover,:active详解
CSS 又名层叠样式表,所谓层叠,就是后面的样式会覆盖前面的样式,所以在样式表中,各样式排列的顺序很有讲究. :link 与 :visited 在样式文件中的顺序可以随便放置. 而focus, ho ...
伪类link,visited,hover,focus,active
CSS 又名层叠样式表,所谓层叠,就是后面的样式会覆盖前面的样式,所以在样式表中, 各样式排列的顺序很有讲究. :link 与 :visited 在样式文件中的顺序可以随便放置.而focus, ho ...
前端 CSS：锚伪类选择器:hover,:active，:visited；等用法总结
前端 CSS:锚伪类选择器:hover,:active,:visited;等用法总结锚伪类选择器:hover,:active,:visited;等用法总结一.什么是锚伪类在支持 CSS 的浏览器 ...
html中鼠标移走的伪元素,a标签的伪元素的应用——link，hover，visited，active
a标签应用中,一般有四个状态: 鼠标未移入前(link),鼠标移入时(hover), 鼠标点击时(active),鼠标点击后(visited). body{ padding: 200px 0; } a ...
CSS中hover出现不生效的几个原因？
在设置CSS的hover时,有时会发现hover不起作用,总结一下原因: 提示:在 CSS 定义中,a:hover 必须被置于 a:link 和 a:visited 之后,才是有效的. 提示:在 CS ...
HTML设置不生效的原因,CSS中hover出现不生效的几个原因？
在设置CSS的hover时,有时会发现hover不起作用,总结一下原因: 提示:在 CSS 定义中,a:hover 必须被置于 a:link 和 a:visited 之后,才是有效的. 提示:在 CS ...

CSS visited，hover，active , focus这四个区别

CSS visited，hover，active , focus这四个区别相关推荐

最新文章

热门文章