active伪类的LVHA顺序

层叠样式表

CSS(Cascading Style Sheets )层叠样式表,所谓层叠就是后面的样式会覆盖前面的样式。所以在样式表中,各样式排列的顺序很有讲究。


:active

:active伪类匹配被用户激活的元素,让页面能在浏览器监测到激活时给出反馈。

  • 当用鼠标交互时,它代表的是用户按下按键和松开按键之间的时间。

  • :active 伪类通常用来匹配tab键交互

注:通常用于但并不限于 abuttonHTML元素


LVHA顺序

:active伪类可能会被后声明的其他链接相关的伪类覆盖,这些伪类包括 :link:hover:visited。为了正常加上样式,需要把 :active的样式放在所有链接相关的样式后,这种链接伪类先后顺序被称为LVHA顺序:

1
:link —> :visited —> :hover —> :active

:link对指向未被访问页面的链接设置样式,根据浏览器的浏览历史

:visited对指向已被访问页面的链接设置样式,根据浏览器的浏览历史

注::link:visited 调换位置不影响样式


:visited

出于隐私原因,使用此选择器修改的样式有较多限制

注:

  • 未设置颜色或透明的属性不能使用:visited