a: link und a: besuchte funktioniert nicht ...?

Question

Meine a: Link und a: besuchte Code in CSS funktioniert nicht. Ich bin nicht sicher, warum und es ist ein bisschen komisch

Auch ist es tatsächlich das Gegenteil von dem, was ich will. Vor dem Besuch ist der Link violett und danach ist es gleich.

body { 
 
    background-color: lightgoldenrodyellow; 
 
    font-family: century gothic; 
 
} 
 
header { 
 
    display: flex; 
 
    justify-content: space-between; 
 
    width: 100%; 
 
    white-space: nowrap; 
 
} 
 
h1 { 
 
    display: inline-block; 
 
    font-size: 30px; 
 
    text-decoration: underline; 
 
} 
 
nav { 
 
    display: inline-block; 
 
} 
 
ul { 
 
    color: black; 
 
} 
 
li { 
 
    display: inline; 
 
    font-size: 30px; 
 
    margin-left: 10px; 
 
    margin-right: 10px; 
 
} 
 
a:link { 
 
    color: black; 
 
} 
 
a:visited { 
 
    color: blueviolet; 
 
} 
 
footer { 
 
    text-align: center; 
 
    margin: 10px; 
 
} 
 
#image1, 
 
#image2 { 
 
    border-radius: 6px; 
 
    display: block; 
 
    margin: auto; 
 
    margin-bottom: 80px; 
 
    width: 70%; 
 
} 
 
p { 
 
    text-align-last: center; 
 
    font-family: helvetica, lucida grande, sans-serif; 
 
    font-size: 30px; 
 
}

<header> 
 
    <nav> 
 
    <ul> 
 
     <li><a href="#">Home</a> 
 
     </li> 
 
     <li><a href="#">About</a> 
 
     </li> 
 
     <li><a href="#">Blog</a> 
 
     </li> 
 
     <li><a href="#">Event</a> 
 
     </li> 
 
     <li><a href="#">Gallery</a> 
 
     </li> 
 
     <li><a href="#">Contact</a> 
 
     </li> 
 
    </ul> 
 
    </nav> 
 
</header> 
 

 
<p>Your Home Show Your Vision</p> 
 

 
<img src="p.d.jpg" alt="Your Perspective" id="image1" /> 
 

 
<img src="e7179db2d394aab60672c37700e15612.jpg" alt="Your Perspective" id="image2" /> 
 

 

 

 
<footer>Copyright &copy 2017</footer>

Answer 1

Die Links # 's sind, die Sie auf die gleiche Seite zurück, die bedeutet, dass Sie, bevor Sie die Seite besucht haben. Sobald Sie die hrefs ändern, sollten sie funktionieren.

Answer 2

Der besuchte Selektor entspricht allen Elementen, deren href-Link bereits besucht wurde.

Sie müssen eingestellt verschiedenen href wie

<nav> 
    <ul> 
    <li><a href="https://www.google.co.in/">Home</a></li> 
    <li><a href="about.html">About</a></li> 
    <li><a href="blog.html">Blog</a></li> 
    <li><a href="event.html">Event</a></li> 
    <li><a href="galery.html">Gallery</a></li> 
    <li><a href="contact.html">Contact</a></li> 
    </ul> 
</nav> 

body { 
 
\t background-color: lightgoldenrodyellow; 
 
\t font-family: century gothic; 
 
} 
 
header { 
 
\t display: flex; 
 
\t justify-content: space-between; 
 
\t width: 100%; 
 
\t white-space: nowrap; 
 
} 
 
h1 { 
 
\t display: inline-block; 
 
\t font-size: 30px; 
 
\t text-decoration: underline; 
 
} 
 
nav { 
 
\t display: inline-block; 
 
} 
 
nav ul { 
 
\t color: black; 
 
} 
 
nav ul li { 
 
\t display: inline; 
 
\t font-size: 30px; 
 
\t margin-left: 10px; 
 
\t margin-right: 10px; 
 
} 
 
nav ul li a { 
 
\t color:#000; 
 
} 
 
a:link { 
 
\t color: black; 
 
} 
 
nav ul li a:visited { 
 
\t color: blueviolet; 
 
} 
 
footer { 
 
\t text-align: center; 
 
\t margin: 10px; 
 
} 
 
#image1, #image2 { 
 
\t border-radius: 6px; 
 
\t display: block; 
 
\t margin: auto; 
 
\t margin-bottom: 80px; 
 
\t width: 70%; 
 
} 
 
p { 
 
\t text-align-last: center; 
 
\t font-family: helvetica, lucida grande, sans-serif; 
 
\t font-size: 30px; 
 
}

<header> 
 
    <nav> 
 
    <ul> 
 
     <li><a href="https://www.google.co.in/">Home</a></li> 
 
     <li><a href="about.html">About</a></li> 
 
     <li><a href="blog.html">Blog</a></li> 
 
     <li><a href="event.html">Event</a></li> 
 
     <li><a href="galery.html">Gallery</a></li> 
 
     <li><a href="contact.html">Contact</a></li> 
 
    </ul> 
 
    </nav> 
 
</header>