html - 刷新页面CSS后重置链接

问题描述

我对 CSS 选择器有疑问:visited。我需要在更新页面后，链接看起来好像您从未访问过它们，但我不知道如何重置它们。

我想创建一个链接列表，单击它们后，它们会改变颜色，这样您就可以控制列表，但是，在完成所有链接后，刷新页面并重新开始，所有默认值链接

标签： htmlcss

我的同事 EMiDU 的回答部分正确，因为他只选择了该页面的第一个 aHref。下面的代码适用于页面中的所有href。

请阅读所有内容，包括评论，以便您更好地理解它。

// Select all hrefs in the page
var all_hrefs = document.querySelectorAll("a");

// For each a[href] add an eventListener on "click" event, and add "visited" class to it
//
// :visited - selector is controlled by browser and you
// .visited - class selector is controlled only by you
//
all_hrefs.forEach(function(single_href) {

  single_href.addEventListener('click', function(){
    
    // Mark link as visited
    // Please note the change I've done to CSS too
    // I replaced :visted with .visited
    this.classList.add('visited');
    
  })
});

.icon{
    background-color: #FF5722;
    display: inline-block;
    width: var(--size);
    height: var(--size);
    padding: var(--padding);
    text-align: center;
    margin: 0.8em;
    border-radius: 15px;
}
.icon:hover{
    cursor: pointer;
    background-color: #FF6922;
    /*Shadow*/
    -webkit-box-shadow: 1px 1px 23px 0px rgba(0,0,0,0.75);
    -moz-box-shadow: 1px 1px 23px 0px rgba(0,0,0,0.75);
    box-shadow: 1px 1px 23px 0px rgba(0,0,0,0.75);
}
.img{
    color: #fff;
    font-size: var(--icon);
}
.txt{
    display: block;
    text-align: center;
    color: #fff;
    font-size: var(--txt);
}
a:link{
    text-decoration: none;
}
a.visited > p{
    color: green;
}

<div class="icon">
    <a href="https://www.dea.gov/fugitives/all" target="_blank">
        <i class="fas fa-fingerprint img"></i>
        <p class="txt">DEA</p>
    </a>
</div>

<br />
Please note that when you click on this link, it is StackOverflow snippet that does not load your link. Copy the JavaScript code into &lt;script&gt; tags and replace <b>:visited</b> selector in CSS with <b>.visited</b> then test the code. It will work as expected! :)

html - 刷新页面CSS后重置链接

问题描述

解决方案

推荐阅读