Link text color not changing after being visited-CodePudding

I'm working with HTML and CSS, and am trying to write a link that directs the user to a new tab. I want the link color change to a specific color I want after being visited, but it somehow remains the color I set for being visited from the beginning, even before it's been visited, and it won't change. How can I fix this? I've looked up online but it still doesn't work.

Here's the code:

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>related</title>
   <style>
      #related_link {
          color: #DED7EC;
          font-family: "Roboto", sans-serif;
          font-weight: bold;
          font-size: 30px;
          margin-bottom: 150px;
          text-align: left;
      }

      #related {
         color: #640344;
    
    
      }

      #related:visited {
         color: red;
         background-color: #91A7FA;
      }

      #related:hover {
         background-color: blue;
      }

   </style>


</head>
<body>
   <div id="related_link">
      <h3>Related Topics:</h3>
      <a id="related" href="new.html" target="_blank" rel="noopener">Click Here To Be Directed To A New Tab</a>
  </div>
</body>
</html>

Any help is appreciated in advance.

CodePudding user response：

The :visited pseudo-class works on the browser's history. The fact that all three links are being drawn with the black colour means that your browser has visited them in the past. If you were to clear your history, or change the links' urls, you'll find that they aren't classed as 'visited'.

A link to Stack Overflow will probably show as visited in your browser, but a link to Voice of JIHAD probably shows up a different colour (unless you are a member of the Taliban). Clicking on the unvisited link will change its colour to the visited colour - as defined in Stack Overflow's stylesheets - and will remain 'visited' as long as the page exists in your browser's history.

Credit to Greg for this answer.