css---3链接伪类与动态伪类
链接伪类link:表示作为超链接,并指向一个未访问的地址的所有锚
链接伪类不可以加在div上
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <!--:link:表示作为超链接,并指向一个未访问的地址的所有锚--> <style type="text/css"> a{ text-decoration: none; } a:link{ color: red; } #test:link{ background: pink; } </style> </head> <body> <a href="#">点我点我点我</a> <div id="test">我是div啦</div> </body> </html>
链接伪类visited:表示作为超链接,并指向一个已访问的地址的所有锚
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <!--:visited:表示作为超链接,并指向一个已访问的地址的所有锚--> <style type="text/css"> a{ text-decoration: none; } a:link{ color: blue; } a:visited{ color: red; } </style> </head> <body> <a href="#">点我点我点我</a> </body> </html>
链接伪类target:代表一个特殊的元素,这个元素的id是URI的片段标识符。
可以利用target写一个div切换
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <!--:target 代表一个特殊的元素,这个元素的id是URI的片段标识符。--> <style type="text/css"> *{ margin: 0; padding: 0; } div{ width: 300px; height: 200px; line-height: 200px; background: black; color: pink; text-align: center; display: none; } :target{ display: block; } </style> </head> <body> <a href="#div1">div1</a> <a href="#div2">div2</a> <a href="#div3">div3</a> <div id="div1"> div1 </div> <div id="div2"> div2 </div> <div id="div3"> div3 </div> </body> </html>
动态伪类 :移入:hover ,移出:active
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> #test:hover{ color: pink; } #test:active{ color: red; } </style> </head> <body> <div id="test"> 我是test </div> </body> </html>
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{ margin: 0; padding: 0; } a{ text-decoration: none; color: black; display: block; } a:hover{ font-size:24px; /*color: red;*/ } a:link{ font-size:48px; /*color: pink;*/ } a:visited{ /*font-size:96px;*/ /*color: deeppink;*/ } </style> </head> <body> <a href="#1">我是第一个a标签</a> <a href="#2">我是第二个a标签</a> <a href="#3">我是第三个a标签</a> <a href="#4">我是第四个a标签</a> <a href="#5">我是第五个a标签</a> <a href="#6">我是第六个a标签</a> </body> </html>
古人学问无遗力,少壮工夫老始成。
纸上得来终觉浅,绝知此事要躬行。