Question

我对CSS选择器:visited有疑问。我需要更新页面后，这些链接就好像您从未访问过一样，但是我不知道如何重置它们。

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

Answer 1

HTML

$common_collection = $collection_1->whereIn('id', $collection_2->pluck('id')->toArray())
    ->unique('id')
    ->sortBy('id');

CSS

<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></div></a>

Answer 2

您无法控制:visited的行为，因为它是由浏览器控制的。除非您修改链接href，否则它似乎过于复杂。

您可以使用简单的CSS和JavaScript来解决问题，而不是使用:visited伪类，只需将类添加到单击的链接中即可。刷新页面后，课程将消失。

CSS

...

a.clicked > p {
    color: red;
}

JS

document.querySelector('a').addEventListener('click', function() {
    if ( ! this.classList.contains('clicked')) {
        this.classList.add('clicked');
    }
});

Answer 3

我的同事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! :)

刷新页面CSS后重置链接

3 个答案: