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

Question

我有一个带有图像和一些文本的框。我希望整个框成为一个新页面的链接。当我悬停时，我希望降低不透明度并改变背景颜色，就像我管理的那样。但是，当我在访问链接后返回页面时，文本变为紫色并带有下划线。

我尝试使用 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   */