css - 为什么单击时 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>

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

我添加了图片来给你们一个想法:

常规

悬停

点击后

点击后用光标高亮文本

Answer 1

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

您想要一直应用到链接的任何样式(即除了颜色、背景位置和文本装饰之外的所有样式)都应该应用:

.UploadPhotos a {}

或

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