css的link a:hover 必须在 a:link 和 a:visited 之后

最新推荐文章于 2022-04-10 19:22:29 发布
最新推荐文章于 2022-04-10 19:22:29 发布
阅读量2.8k 收藏 1
点赞数 1
CC 4.0 BY-SA版权
分类专栏： CSS HTML 文章标签： css html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/u010002184/article/details/49387009
本文介绍了一种便于记忆的CSS链接状态顺序原则——“爱恨原则”，即LoVe/HAte，对应a:link、a:visited、a:hover、a:active四个伪类，并解释了这些状态之间的覆盖规则。

近日突然发现，原来这个CSS问题早已有高人提出啦。还是个老外呢。他给总结了一个便于记忆的“爱恨原则”（LoVe/HAte），即四种伪类的首字母:LVHA。
再重复一遍正确的顺序：a:link、a:visited、a:hover、a:active .

最后经验补充：
1.鼠标经过的“未访问链接”同时拥有a:link、a:hover两种属性，后面的属性会覆盖前面的属性定义；
2.鼠标经过的“已访问链接”同时拥有a:visited、a:hover两种属性，后面的属性会覆盖前面的属性定义；
所以说，a:hover定义一定要放在a:link、a:visited的后面，，， 

CSS教程:vlink,alink,link和a:link
09-27
在CSS中，这四个伪类的状态顺序至关重要，因为它们遵循特定的流程：`a:link -> a:hover -> a:active -> a:visited`。这意味着，当链接状态从一个过渡到另一个时，必须按照这个顺序来定义样式。例如，用户首先看到的...
a标签的四个css伪类(link、visited、hover、active)样式理解
11-30
link、visited、hover、active 未移入a标签链接时：link 移入a标签链接时：link、hover 点击a标签链接时：link、hober、active 点击后未移入a标签连接时：link、visited 点击后移入a标签连接时：link、visited...
a:hover 与 a:link 和 a:visited的位置关系
孤独行者
07-08 659
1. a:hover 必须位于 a:link 和 a:visited 之后，这样才能生效！ 2. a:active 必须位于 a:hover 之后，这 样才能生效！ 于是得四者顺序： a:link----->a:visited------>a:hover-------->a:active。  可以这样记：LoVe HAte（爱恨） [注意大写字母]
a标签链接伪类:link、:visited、:hover、:active的排列顺序
请叫我二狗哥
04-01 2351
链接伪类要想所有伪类均起效果，需要按照一定顺序进行排列： :link>:visited>:hover>:active 1、a:hover必须置于a:link和a:visited之后才有效。 2、a:active必须置于a:hover之后才有效。 3、伪类名称对大小写不敏感。 <!DOCTYPE html> <html> <head lan...
a:link a:visited a:hover a:active 样式顺序
zjuwwj的博客
02-17 4420
1. a:hover 必须被置于 a:link 和 a:visited 之后，才是有效的 2. a:active 必须被置于 a:hover 之后，才是有效的
web前端学习（十六）——CSS3链接属性（a:XXX）的相关设置
贝尔摩德苦艾酒
01-25 9405
web前端学习（十六）——CSS3链接属性（a:XXX）的相关设置
：hover的知识点
qq_45852515的博客
04-10 1440
控制自己本身 div:hover { backgroun-color: red; } 控制子元素样式 div:hover div { background-color: red; } 控制相邻同级元素 div:hover+div { background-color: red; } 控制不相邻同级元素 div:hover~div { background-color: red; } 相关的还有:active :link :visited link:平
在CSS中定义a:link、a:visited、a:hover、a:active正确顺序
09-25
了解了各个伪类选择器的作用后，我们来探讨为什么CSS规则中a:link、a:visited、a:hover、a:active的顺序必须是LVHA。 1. 浏览器解析CSS的“就近原则” 浏览器在解析CSS规则时会遵循“就近原则”，即最后定义的样式...
改变herf链接的style
青峰专栏
06-05 1673
<br /><html><br /><head><br /><style type="text/css"><br />a.one:link {color: #ff0000}<br />a.one:visited {color: #0000ff}<br />a.one:hover {color: #ffcc00}<br />a.two:link {color: #ff0000}<br />a.two:visited {color: #0000ff}<br />a.two:hover {font-size: 1
HTML设置不生效的原因,CSS中hover出现不生效的几个原因 ？
weixin_42546361的博客
06-21 1028
在设置CSS的hover时，有时会发现hover不起作用，总结一下原因：提示：在 CSS 定义中，a:hover 必须被置于 a:link 和 a:visited 之后，才是有效的。提示：在 CSS 定义中，a:active 必须被置于 a:hover 之后，才是有效的。1.在设置:hover前加空格：比如:.one {margin: 0 auto;width: 400px;height: 300...
在CSS中定义A:active/A:link/A:visited/A:hover顺序
weixin_34389926的博客
09-18 554
以前用CSS一直没有遇到过这个问题，在最近给一个本科同学做的项目里面。出现一些问题，搜索引擎查了一些网站和资料，发现很多人问到这个问题，给出的结果我试了试，大部分都不正确。 给出我试的顺序，可能会对大家有一些帮助： A:link {color: #000000;TEXT-DECORATION: none}A:visited {COLOR: #000000; ...
链接样式顺序：link、visited、hover、active
y1238r的博客
11-26 1396
1、介绍 a:link - 正常，未访问过的链接 a:visited - 用户已访问过的链接 a:hover - 当用户鼠标放在链接上时 a:active - 链接被点击的那一刻 当设置为若干链路状态的样式，也有一些顺序规则： a:hover 必须跟在 a:link 和 a:visited后面 a:active 必须跟在 a:hover后面 2、css a:link { color: gray; } a:visited { color: red; } a:hover { color: green
CSS中a标签样式原则 a:link a:visited a:hover a:active执行顺序
GoodShot的专栏
12-28 8221
CSS为一些特殊效果准备了特定的工具，我们称之为“伪类”。其中有几项是我们经常用到的，下面我们就详细介绍一下经常用于定义链接样式的四个伪类，它们分别是： 代码如下: :link :visited :hover :active 因为我们要定义链接样式，所以其中必不可少的就是超级链接中的锚标签--a，锚标签和伪类链接起来书写的方法就是定义链接样式的基础方法，它们的写法如下：
谈一谈a:link、a:visited、a:hover、a:active的正确使用顺序
热门推荐
薰衣草PK向日葵的博客
01-18 5万+
今天学到一个有趣的新知识呢，迫不及待的想分享一下。自学前端的这条路上，还在基础部分打转，未来好难，走好现在脚下的每一步才是我现在最重要的。小小地感慨一下，下面进入正题吧。 1. &lt;a&gt;标签 我们先说一说&lt;a&gt;标签是干啥用的。 &lt;a&gt; 标签定义超链接，用于从一张页面链接到另一张页面。 &lt;a&gt; 元素最重要的属性是 href 属性...
a:link、a:visited、a:hover、a:active的正确使用顺序
光
02-20 1675
L-V-H-E l(link)ov(visited)e h(hover)a(active)te， 即用喜欢和讨厌(LOVE-HATE)两个词来概括 因为css的就近原则(后面的覆盖前面的), 错误的顺序会导致颜色显示与预期不符, 进入知乎,了解更多...
CSS 链接
weixin_30718391的博客
06-05 373
不同的链接可以有不同的样式。 链接样式 链接的样式，可以用任何CSS属性（如颜色，字体，背景等）。 特别的链接，可以有不同的样式，这取决于他们是什么状态。 这四个链接状态是： a:link - 正常，未访问过的链接 a:visited - 用户已访问过的链接 a:hover - 当用户鼠标放在链接上时 a:active - 链接被点击的那一刻 实例 a:link...
html中after对应的样式怎么写,css – 如何写：hover条件为a：before和a：after？
weixin_42365688的博客
06-03 1086
这取决于你实际上想做什么。如果你只是想在a元素匹配一个伪类时，在伪元素之前应用样式，你需要改写：hover：before或a：visited：before。注意，伪元素在伪类之后(事实上，在整个选择器的最后)。还要注意，它们是两个不同的东西;调用它们两个“伪选择器”将会困惑你一旦你遇到语法问题，如这一个。如果你正在编写CSS3，你可以用双冒号表示一个伪元素，使这个区别更清楚。因此，a：hover ...
CSS中定义a:link、a:visited、a:hover、a:active顺序
weixin_34055910的博客
09-27 217
a :link、a:hover、a:visited这几个元素，定义CSS时候的顺序不同，也会直接导致链接显示的效果不同。 eg:让未访问链接颜色为red，活动链接为yellow，已访问链接为green： 第一种情况： CSS定义的顺序为a:visited、a:hover、a:link. 把鼠标放到未访问过的red链接上时，它并不变成yellow，只有放在已访问的green链接上，链接才会变...
设置a标签的visited、hover状态，未能出现预期的效果
江南孤鹜——“知行合一”的Software Developer
05-22 1406
解决方案 a :link、a:hover、a:visited这几个元素，定义CSS时候的顺序 不同，也会直接导致链接显示的效果不同。 浏览器解释CSS时遵循的“就近原则”。 1.鼠标经过的“未访问链接”同时拥有 a:link、a:hover 两种属性，后面的属性会覆盖前面的属性定义； 2.鼠标经过的“已访问链接”同时拥有 a:visited、a:hover 两种属性，后面的属性
CSS a:hover
08-19
CSS a:hover是一种CSS伪类选择器，用于定义当鼠标悬停在链接上时的样式。它必须位于a:link和a:visited之后，而a:active必须位于a:hover之后，以确保正确的优先级。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* [CSS a:hover](https://blog.youkuaiyun.com/qq_28499043/article/details/48391775)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] - *2* *3* [CSS基础](https://blog.youkuaiyun.com/qq_34569497/article/details/83744617)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

二十六画生的博客

你的鼓励是我创作最大的动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值