【问题标题】:why “a:hover MUST come after a:link and a:visited(w3school)”? [duplicate]为什么“a:hover 必须在 a:link 和 a:visited(w3school)之后”? [重复]
【发布时间】:2016-03-18 07:50:59
【问题描述】:

我在“w3schools”学习CSS,在“链接”一章,他们说:

"在为多个链接状态设置样式时,有一些顺序规则:

a:hover 必须在 a:link 和 a:visited 之后 a:active 必须在 a:hover 之后"

我想知道为什么正确的顺序是 L.V.H.A,而不是 L.H.V.A 或其他。

【问题讨论】:

标签: html css hyperlink pseudo-class


【解决方案1】:

必须以特定顺序声明伪类。

助记符 LoVe HAte 总是有助于记住正确的顺序:

:link
:visited
:hover
:active

每个伪类对应一个事件,该事件只能在时间轴上比之前发生。

也就是说:

  1. 链接在被访问之前未被访问。

  2. 链接在悬停之前已被访问。

  3. 一个链接在使用前悬停在它上面。

【讨论】:

  • 所以,正如你所说,正确的顺序是“l(存在).H(悬停在然后点击访问).A(当我点击时,它正在使用中).V(访问过)”?
  • 差不多了。您尚未与之交互的任何链接都是未访问 (:link) 或已访问 (:visited)...当您开始与链接交互时,首先您将鼠标悬停在它上面 (:hover),然后您单击它 (:active)。
【解决方案2】:

主要原因是因为后面的规则按顺序在CSS中的文档中找到的前面的规则之后执行,这意味着后面的行为将在执行所有前面匹配的规则之后执行。因此,为了避免会影响彼此行为的重叠,它们的顺序确实很重要。

例如,如果:link 放在:visited 之后,:visited 的某些行为将重叠,例如尽管已访问,但它的颜色可能显示为正常链接。

【讨论】:

  • 感谢您的回答。现在我可以理解“链接”和“访问”、“悬停”和“活动”的顺序了。你能给我一个“访问”和“悬停”的解释和例子吗?我认为正确的顺序是“我将鼠标悬停在它上面然后我访问它”,不是吗?
猜你喜欢
  • 1970-01-01
  • 2014-01-16
  • 1970-01-01
  • 2023-03-11
  • 2011-11-14
  • 1970-01-01
  • 1970-01-01
  • 2011-03-30
  • 2017-09-06
相关资源
最近更新 更多