HTML <a> 标签的伪类
伪类的语法:
selector : pseudo-class {property: value}
CSS 类也可与伪类搭配使用。
selector.class : pseudo-class {property: value}
例如:
a.red : visited {color: #FF0000}
<a class="red" href="css_syntax.asp">CSS Syntax</a>
注意:
<!-- 如果a的href属性不存在,上面的伪类CSS样式会不起效 -->
<a class="red">CSS Syntax</a>
<!-- 如果不想a添加href跳转到其他页面或资源,这样即保留了a的样式,又阻止了a的点击跳转 -->
<a class="red" href="javascript:void(0);">CSS Syntax</a>
锚伪类:
在支持 CSS 的浏览器中,链接的不同状态都可以不同的方式显示,这些状态包括:活动状态,已被访问状态,未被访问状态,和鼠标悬停状态。
a:link {color: #FF0000} /* 未访问的链接 */
a:visited {color: #00FF00} /* 已访问的链接 */
a:hover {color: #FF00FF} /* 鼠标移动到链接上 */
a:active {color: #0000FF} /* 选定的链接 */
提示:在 CSS 定义中,a:hover 必须被置于 a:link 和 a:visited 之后,才是有效的。
提示:在 CSS 定义中,a:active 必须被置于 a:hover 之后,才是有效的。
提示:伪类名称对大小写不敏感。
HTML <a> 标签的伪类的更多相关文章
- CSS学习笔记-03- 过渡模块之前奏篇 a标签的伪类选择器
CSS3 2D转换CSS3 3D转换CSS3 过渡CSS3 动画 CSS3 的四大金刚. 想要实现酷炫的视觉效果,上面4个是必须要掌握的.学习之前,先复习一下 视觉盛宴的前菜 :a标签的伪类选择器 铛 ...
- 前端(六)—— 伪类选择器:a标签的伪类、内容伪类、索引伪类、取反伪类
a标签的伪类.内容伪类.索引伪类.取反伪类 一.a标签的四大伪类 :link:未访问状态 :hover:悬浮状态 :active:活跃状态 :visited:已访问状态 四大伪类也可用于其他标签 &l ...
- HTML连载63-a标签的伪类选择器
一.a标签的伪类选择器 1.通过观察可以发现a标签存在一定状态 (1)默认状态,从未被访问过 (2)被访问过的状态 (3)鼠标长按的状态 (4)鼠标悬停在a标签上的演示 2.什么是a标签的伪类选择器? ...
- python 46 边界圆角 、a_img_list标签 、伪类选择器
一:边界圆角 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <ti ...
- 超链接a标签的伪类选择器问题,Link标签与visited标签的失效问题(问题介绍与解决方法)。
<!DOCTYPE html>< html>< head> <meta charset="utf-8" /> < ...
- a标签的伪类
a 超链接 伪类:给元素添加特殊的效果 :link 未访问过的链接初始颜色 :visited 访问过后的链接颜色 :hover 鼠标移入(悬停)时的颜色 :active 鼠标按下时链接的颜色 书写时的 ...
- a标签伪类的顺序
在一次开发项目中,我用a链接来做效果,测试的时候发现,a:hover被点击后的效果就不再了!我百度才知道,原来在css写a链接也是有顺序之分的. 顺序应该是: a:link a标签还未被访问的状态: ...
- 【CSS学习笔记】a标签的四种伪类
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xht ...
- a标签伪类选择器以及伪元素:hover的案例
1.通过我们的观察发现a标签存在一定的状态1.1默认状态, 从未被访问过1.2被访问过的状态1.3鼠标长按状态1.4鼠标悬停在a标签上状态 2.什么是a标签的伪类选择器?a标签的伪类选择器是专门用来修 ...
随机推荐
- 20145305 《网络对抗》Web安全基础实践
实践过程及结果截图 Phishing with XSS 在文本框里面写一个钓鱼网站代码就可以了 </form> <script> function hack(){ XSSIma ...
- Asterisk1.8 sip编码协商分析
在开始分析之前,先对编码协商中可能涉及的asterisk数据结构和变量作些说明.ast_channel:定义一个通用的通道数据结构 struct ast_channel { const struct ...
- Python3基础 str casefold 返回全是小写字母的新字符串
Python : 3.7.0 OS : Ubuntu 18.04.1 LTS IDE : PyCharm 2018.2.4 Conda ...
- C#学习笔记(二十):C#总结和月考讲解
m1w1d2_console_variable_constant 输入Console.WriteLine(); 输出Console.ReadLine(); 快捷键 折叠代码:快捷键“Ctrl+ K + ...
- rg.apache.ibatis.binding.BindingException: Mapper method 'com.dao.Cameao.getOnlineDayRation attempted to return null from a method with a primitive return type (float)
本文为博主原创,未经允许不得转载: 异常展示如下: org.apache.ibatis.binding.BindingException: Mapper method 'com.dao.Cameao. ...
- java项目中.classpath,.settings,.project,mymetadata文件的作用
今天犯了一个错误,误修改了本地的.classpath文件,导致项目好多地方报错,之前也没有仔细的研究过项目中的一些生成文件的作用. 今天特此进行记录. 不管我们在eclipse中新建任何的Java项目 ...
- spring +servlet 与 spring MVC
spring serlvetSpring框架中context-param与servlet中init-param的contextConfigLocation的区别https://blog.csdn.ne ...
- python 函数赋值
⾸先我们来理解下Python中的函数 def hi(name="yasoob"): return "hi " + name print(hi()) # outp ...
- 对不队——Alpha冲刺
第五天 日期:2018/6/20 一. 今日完成任务:专家审稿逻辑的开发 冯晓.马思远:会议网站栏目管理开发,软件功能测试 王爽.彭辉:审稿管理员分稿和稿件查找功能开发,博客撰写 吴琼.郝延婷:更换 ...
- 原始的生成对抗网络GAN
论文地址:https://arxiv.org/pdf/1406.2661.pdf 1.简介: GAN的两个模型 判别模型:就是图中右半部分的网络,直观来看就是一个简单的神经网络结构,输入就是一副图像, ...