在 html 中访问 link 后，如何删除下划线和紫色文本颜色

Question

我有一个盒子，里面有一张图片和一些文字。我希望整个框成为新页面的 link。当我悬停时，我希望不透明度降低并改变背景颜色，正如我所管理的那样。但是，当我访问 link 后返回页面时，文本变为紫色并带有下划线。

我尝试使用 a:visited 但它不起作用。

感谢所有能得到的帮助

.one {
    margin: 10px;
    background-color: rgb(231, 231, 231);
    width: 29%;
    padding: 10px;
    display: inline-flex;
    text-decoration: none;
    color: black;
    }
.one img {
    margin: 0 15px 0 0;
    object-position: 0% -90px; 
    width: 230px; /* width of container */
    height: 230px; /* height of container */
    object-fit: cover;
    border-radius: 50%;
    }
.one:visited{
    text-decoration: none;
    color: black;    
    }
.one:hover {
    opacity: 90%;
    background-color: rgb(238, 238, 238);
    }

    <a href="surf.html" class="one">
        <img src="surf.jpg" alt="">
        <div>
            <h1>Surfing</h1>
            <p>Come and surf in the worlds most beautiful places</p>
        </div>    
    </a>

！

Answer 1

你试过这个吗:

a {color:#FF0000;}         /* Unvisited link  */
a:visited {color:#00FF00;} /* Visited link    */
a:hover {color:#FF00FF;}   /* Mouse over link */
a:active {color:#0000FF;}  /* Selected link   */

在 html 中访问 link 后，如何删除下划线和紫色文本颜色

How can I remove underline and purple text color after the link is visited in html

html

css

colors

hyperlink

underline