haizlin/fe-interview

[css] 第210天 请写出:link、:visited、:hover、:active的执行顺序

Opened this issue · 5 comments

haizhilin2013 commented

第210天 请写出:link、:visited、:hover、:active的执行顺序

我也要出题

wheatup commented
  • :link

    未访问链接

  • :visited

    已访问的链接

  • :hover

    鼠标悬停

  • :active

    鼠标按下

顺带一提，可交互式的组件还有一个

  • :focus

    选中状态（鼠标点击、TAB键）

  • 👍3
suoling commented
  • :link(未访问链接)，:visited(已访问的链接)，:hover(鼠标悬停)，:active(鼠标按下)
  • a标签伪类 正确的顺序 是：lvha(:link--:visited--:hover--:active)
  • 上述那样的执行顺序，其实本质还是“同等优先权的样式，写在后边的会覆盖前边”，a标签的伪类只不过是又结合了不同的动作顺序，动作的触发顺序决定了伪类的顺序必须按lvha来写。
  • 因为前2者两种状态是常态，而后2者是即时状态，当即时状态触发时，要覆盖常态，所以2个即时状态要放在后边；
  • 因为在常态下：如果a标签被访问过后，就要呈现被访问过的状态，所以visited 要放在link后边；
  • 因为鼠标按下时，伴随着悬停的a标签上，所以要想active覆盖hover，就必须把active放后边；
  • 另外 :link 和 a 的样式有可能会冲突
  • 注意： 当 标签的 href 属性为空的时候，:link样式不会生效；当 标签的 href 属性不为空的时候，:link 样式才会生效，这时候，如果 标签正常样式 和 a：link 冲突了的话，以写在后面的那个为准；
  • 👍8
jsThin commented

爱恨原则，LoVe HAte

  • 👍17
  • 😄1
  • 🎉1
neilyoTracer commented

lvha
link visited hover active

cxwht commented

爱恨原则的大佬厉害了