当前位置:网站首页>Pseudo class of hyperlink and how to clear cache

Pseudo class of hyperlink and how to clear cache

2020-11-10 12:48:13 osc_eqcu0796

Pseudo class of hyperlink and how to clear cache

Pseudo class of hyperlinks :

  • a:link —— No access status
  • a:visited—— Visited status
  • a:hover—— Mouse hover state
  • a:active—— Mouse activation ( Click on ) state

High energy ahead please note :

  1. When four states exist at the same time , In order : a:link→a:visited→a:hover→a:active

  2. except a:visited Any attribute of other hyperlink pseudo class can be set , however a:visited Only font color properties can be set (color), Do you have many question marks here ,why? Please read on ↓

 About a:visited You can only set the font color attribute. I've been testing it for a long time , Then I asked the teacher , teacher 
 It's just that I set too many properties , Remove all, leaving only the font color attribute , But it still doesn't answer my question 
 The fundamental problem , Then I got a wave of Baidu , I found that many people also encountered this kind of confusion , Finally, I found an article , He ( she )
 It's through webkit About a:visited To explain the problem , The general meaning is :“a:visited Pseudo classes can be 
 It can expose users' browsing information records , The attacker may judge the website the user has visited based on this , Cause unnecessary damage 
 loss , So these browsers decided to limit a:visited The function of , So it's not about the code , It's a browser limitation 
 system .”
 Refer to the author's article for links :https://www.cnblogs.com/phoenixee/p/5960917.html

About clearing the cache :
When we set pseudo classes for hyperlinks, we also find a problem , It's when we're done setting up a:link( No access status ) Font color for , And a:visited( Visited status ) After the font color of

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /*  Never visited link color  */
        a:link{
            color: blue;
        }
        /*  The color of links that have been visited  */
        a:visited{
            color: red;
        }
    </style>
</head>
<body>
    <a href="#"> study hard , Day day up ! cheer up !</a>
</body>
</html>

function :

  • Before visiting the hyperlink :

 Before visiting the hyperlink :

  • After clicking on the hyperlink :

 After clicking on the hyperlink :

  • Refresh ( It's still the color of the hyperlink you've visited ):

 Refresh :
So here comes the question , After refresh , According to the normal logic, the color of the unreachable links should be displayed , But at this time we will find that , It's still the color of the visited link ,why? Because of the browser cache problem , Clear cache , You can display the font color of the unreachable link ~

So here comes the question , How to clear the cache ?

First step :
 First step
The second step :
 The second step
The third step :
 The third step
Step four :
 Step four
Refresh again is not visited state hyperlink color ~ Have you learned , Try it now ! Refresh again







版权声明
本文为[osc_eqcu0796]所创,转载请带上原文链接,感谢