为什么单击时css按钮会失去其样式？

Question

我完全迷失了这个。好的，所以我用 CSS 创建了一个按钮，看看 CSS 代码：

.UploadPhotos a:link{
    display:block;
    width:100px;
    height:22px;
    padding-top:2px;
    margin-left:auto;
    margin-right:auto;
    text-align:center;
    background:url(../images/btn_image.png) 0 0 no-repeat;
    text-decoration:none;
    color:#FFF;
}
.UploadPhotos a:hover{
    background-position: 0 -24px;
    text-decoration:none;
    color:#060;
}
.UploadPhotos a:active{
    background-position: 0 0px;
    text-decoration:none;
    color:#FFF;
}
.UploadPhotos a:visited{
    background-position: 0 0px;
    text-decoration:none;
    color:#FFF;
}

现在是 HTML 代码：

<div class="UploadPhotos">
    <a id="UpLd" href="uploader/upload.php">Upload Photos</a>
</div>

当我点击它时，问题就开始了。该链接正在使用 js 完成的 iframe 中打开另一个页面。单击此按钮后，此按钮的所有样式都消失了。即使我在链接上设置了 href="#"，我也会遇到同样的问题。所以我不相信它是打开页面的js。我不明白为什么单击后样式突然消失了。

我添加了一些图片给你们一个想法：

常规

悬停

点击后

点击后用光标突出显示文本

Answer 1

因为:link 表示“未访问的链接”而不是“任何链接”。

您想一直应用于链接的任何样式（即除颜色、背景位置和文本装饰之外的所有样式）都应使用以下任一样式：

.UploadPhotos a {}

或

.UploadPhotos a:link,
.UploadPhotos a:visited {}

Answer 2

a:visited 和 a:active 需要背景颜色。单击按钮后，它现在处于活动状态并被访问。如果你改变焦点，它就会被访问。此外，如果您点击控件（在单击它之前），您将看到相同的行为，因为状态更改为活动。

另外添加一个类：

.UploadPhotos a {
display:block;
width:100px;
height:22px;
padding-top:2px;
margin-left:auto;
margin-right:auto;
text-align:center;
background:url(../images/btn_image.png) 0 0 no-repeat;
text-decoration:none;
color:#FFF;
}