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标签的伪类选择器是专门用来修 ...
随机推荐
- echart知识点、常用图形
原文地址:https://www.cnblogs.com/kewenxin/p/9338272.html 本文是自己在项目中需要运用到的echarts图形进行整理,都有完整的代码.echarts原型, ...
- div居中布局
利用margin属性可以实现div居中布局,把div的左边距和右边距设置为auto即可,代码如下 <!DOCTYPE html> <html> <head> < ...
- SNMP学习笔记之Centos7配置SNMP服务
0x00 安装yum源安装SNMP软件包 1.yum源安装SNMP服务: yum -y install net-snmp net-snmp-utils 2.查看SNMP版本号: snmpd -v 0x ...
- Php cli模式下执行报错/usr/bin/php: /usr/local/lib/libxml2.so.2: no version information available (required by /usr/bin/php)
centos下php cli模式报错 /usr/bin/php: /usr/local/lib/libxml2.so.2: no version information available (requ ...
- 安装OpenOffice
附件: OpenOffice 1.下载解压 tar -zxvf Apache_OpenOffice_4.1.3_Linux_x86-64_install-rpm_zh-CN.tar.gz 2.安装 / ...
- 20145312 《网络对抗》 Web安全基础实践
20145312 <网络对抗> Web安全基础实践 问题回答 SQL注入攻击原理,如何防御 原理:攻击者在web应用程序中事先定义好的查询语句的结尾上添加额外的SQL语句,把SQL语句当做 ...
- 20145333茹翔 Exp5 MS08_067漏洞测试
20145333茹翔 Exp5 MS08_067漏洞测试 实验过程 IP:kali:192.168.31.177.windows 2003 :192.168.31.223 使用命令msfconsole ...
- Win32 API编程:使用CreateProcess创建新进程
#include <windows.h> #include <tchar.h> #include <stdio.h> int main(int argc, char ...
- Easyui 官网网址
http://www.jeasyui.com/download/list.php 下载版本1.5.2的easyui中文API,可在CSDN网站http://download.csdn.net/down ...
- Python3基础 delattr 删除对象的属性
Python : 3.7.0 OS : Ubuntu 18.04.1 LTS IDE : PyCharm 2018.2.4 Conda ...