[英]link order in css
Whats the correct order of styling the <a>
element (link, visited, hover, active). 是什么样的
<a>
元素(链接,访问,悬停,活动)样式的正确顺序。 All are confusing by providing different combination like LVHA, LAHV. 通过提供LVHA,LAHV等不同组合,所有这些都令人困惑。 Can anybody specify the correct ordering?
任何人都可以指定正确的顺序吗?
Link Visited Hover Active 链接访问悬停活动
To quote from the CSS specification : 引用CSS规范 :
a:link { color: red } /* unvisited links */ a:visited { color: blue } /* visited links */ a:hover { color: yellow } /* user hovers */ a:active { color: lime } /* active links */
Note that the A:hover must be placed after the A:link and A:visited rules, since otherwise the cascading rules will hide the 'color' property of the A:hover rule.
请注意,A:hover必须放在A:link和A:visited规则之后,否则级联规则将隐藏A:hover规则的'color'属性。 Similarly, because A:active is placed after A:hover, the active color (lime) will apply when the user both activates and hovers over the A element.
同样,因为A:active位于A:hover之后,当用户激活并悬停在A元素上时,将应用活动颜色(lime)。
You might prefer VLHA ordering as well, which makes no difference. 您可能也更喜欢VLHA订购,这没什么区别。 However CSS spec specified LVHA ordering and, in fact, this one is easy to memorize: i LoVeHA!
然而CSS规范指定LVHA排序,事实上,这个很容易记忆:我LoVeHA!
Here is the best order, especially for pseudo classes. 这是最好的顺序,特别是伪类。 ALV VH HA (I pronounce it Al'va ha')
ALV VH HA(我发音为Al'va ha')
a { color: white; text-decoration: none; } /* bookmark */
a:link { color: red; } /* regular link */
a:visited { color: green; text-decoration: strikethrough; } /* visited link */
a:visited:hover { color: blue; text-decoration: underline overline; } /* visted hover link */
a:hover { color: yellow; text-decoration: underline overline; } /* hover link */
a:active { color: orange; text-decoration: underline overline; } /* active link */
This keeps both visited states and both hover states together as well as staying with the specified order. 这样可以将访问状态和两种悬停状态保持在一起并保持指定的顺序。 It also allows for styling of bookmarks such as
它还允许书签的样式,如
<a name="bookmark_name">Bookmark Text</a>
which you can target with 你可以用它来定位
<a href="bookmark_name">Link Text</a>
I find this is great for linking right to a section of a site but where you don't want the bookmark to have an automatic hover style, which it will since it's an anchor tag. 我发现这非常适合链接到网站的某个部分但您不希望书签具有自动悬停样式,因为它是锚标记。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.