html结构:超级链接a
<a href="http://www.baidu.com" target="_blank">超级链接 </a>
1、a的四个状态
a标签与其他标签不同,它有四个显示状态,可以设置不同的显示样式,代码↓
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> <title>Document</title> <style type="text/css"> *{ margin: 0; padding: 0; } /*链接颜色蓝色*/ a:link{ color: blue; } /*点击链接一次后刷新界面的状态 链接颜色紫色*/ a:visited{ color: purple; } /*鼠标指针悬停在链接上状态 链接颜色红色*/ a:hover{ color: red; } /*点住链接不撒手时状态 链接颜色绿色*/ a:active{ color: green; } </style> </head> <body> <a href="http://www.baidu.com">点击转到百度</a> </body> </html>View Code
效果图脑补一下就好。
这四个状态是根据用户的动作产生变化,动作未发生 ,对应的样式也不会加载出来。
如:.box 这个选择器,给他添加的样式是工作人员手动添加的,在网页加载时这些样式会立即加载。
a的四个状态里 例如:a:hover,它添加的是用户行为对应的状态属性,这些样式在加载网页时不会立即加载,只有用户行为触发了这种状态时,这些样式才会被加载。
:hover 这就叫做伪类 这个选择器与类选择器权重一样。
2、a标签四个状态的书写顺序
a的四个伪类都有自己的权重,权重相同,根据书写顺序不同,会有层叠效果。代码↓
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> <title>Document</title> <style type="text/css"> *{ margin: 0; padding: 0; } a:link{ color: blue; } a:hover{ color: red; } a:active{ color: green; } a:visited{ color: purple; } </style> </head> <body> <a href="http://www.baidu.com">点我进百度</a> </body> </html>View Code
我把visited放到最下面,当你第一次加载点击连接的时候,这4个效果都会正常出现,当你第二次加载时,你会发现悬停、点击时候的链接颜色效果都被visited层叠掉,也就是无论你怎么弄,这个链接就是紫色。
所以这四个状态的书写顺序是:link,visited,hover,active
记住顺序:爱恨准则 Love hate。