Css 超链接按钮

我正在尝试设置回复按钮的格式：

.replyBtn {
    background-color:#CCC;
    color:#333333;
    font-weight:bold;
    padding:3px;
    font-size:12px;
    text-decoration:none;
}
.replyBtn:hover {
    background-color:#333;
    color:#FFFFFF;
    font-weight:bold;
    padding:3px;
    font-size:12px;
    text-decoration:none;
}
.replyBtn:link {
    background-color:#333;
    color:#FFF;
    font-weight:bold;
    padding:3px;
    font-size:12px;
}
.replyBtn:active {
    background-color:#CCC;
    color:#333333;
    font-weight:bold;
    padding:3px;
    font-size:12px;
}
.replyBtn:visited {
    background-color:#CCC;
    color:#333333;
    font-weight:bold;
    padding:3px;
    font-size:12px;
}

---

背景颜色会改变。唯一错误的是，它显示了带有下划线的超链接颜色（这是我不想要的）。此外，文本的颜色应在悬停在…

类前面添加

a

时变为白色

a.replyBtn:hover

---

CSS按照所用选择器的特定顺序工作，然后，如果两个选择器具有相同的特定性，则按照最后一个选择器的顺序工作。将CSS重新排序为：

.replyBtn {
    background-color:#CCC;
    color:#333333;
    font-weight:bold;
    padding:3px;
    font-size:12px;
    text-decoration:none;
}
.replyBtn:link {
    background-color:#333;
    color:#FFF;
    font-weight:bold;
    padding:3px;
    font-size:12px;
}
.replyBtn:visited {
    background-color:#CCC;
    color:#333333;
    font-weight:bold;
    padding:3px;
    font-size:12px;
}
.replyBtn:hover {
    background-color:#333;
    color:#FFFFFF;
    font-weight:bold;
    padding:3px;
    font-size:12px;
    text-decoration:none;
}
.replyBtn:active {
    background-color:#CCC;
    color:#333333;
    font-weight:bold;
    padding:3px;
    font-size:12px;
}

我要指出，您似乎正在使用默认设置

.replyBtn

元素的样式，然后在

样式中超越这些默认设置。我知道您可能有其他具有相同类名的元素类型，但是您应该在
中定义
a
/链接特定的样式。replyBtn:link
，因此它形成了所有这些链接的默认值：

.replyBtn:link {
    text-decoration: none;
    background-color:#333;
    color:#FFF;
    font-weight:bold;
    padding:3px;
    font-size:12px;
}

/* all the other stuff... */


编辑以回应评论中留下的评论，来自OP:

试试这个：jsfiddle.net/CTxQs

那么，考虑到您的HTML标记是：

<div class="replyBtn"><a href="#btn_comment">Reply</a></div>​

选择类名为replyBtn

的元素作为链接；如果您的

a

元素的类为

.replyBtn

，那么这一切都很好，并且会起作用。但事实并非如此；

a

元素是

.replyBtn

div

元素的子元素。将选择器修改为以下内容：

.replyBtn { /* selects the div */
    background-color:#CCC;
    color:#333333;
    font-weight:bold;
    padding:3px;
    font-size:12px;
    text-decoration:none;
}

.replyBtn a:link { /* selects the a that's a child of the div */
    background-color:#333;
    color:#FFF;
    font-weight:bold;
    padding:3px;
    font-size:12px;
    text-decoration:none;
}
.replyBtn a:visited {
    background-color:#CCC;
    color:#333333;
    font-weight:bold;
    padding:3px;
    font-size:12px;
}
.replyBtn a:hover {
    background-color:#333;
    color:#FFFFFF;
    font-weight:bold;
    padding:3px;
    font-size:12px;
    text-decoration:none;
}
.replyBtn a:active {
    background-color:#CCC;
    color:#333333;
    font-weight:bold;
    padding:3px;
    font-size:12px;
}​

进一步阅读Eric Meyer的文章：

---

我成功地将我所需的行为应用为

a:link.replyBtn, a:visited.replyBtn, 
a:active.replyBtn, a:hover.replyBtn {...}

在我的页面上，所有链接都按预期显示，即关于它们的css类。它正在开发Chrome，但不是IE，仍在开发中。。。

---

希望这能帮助你记住“爱恨”这个短语，你的链接应该按照以下顺序排列：

a:link

，

a:visted

，

a:hover

，

a:active

@DavidThomas这个短语中的其他字母怎么了。我会发现很难记住哪些字母是大写的，哪些不是。好吧，我只是觉得它比“LVHA”更容易记忆，因为这是埃里克·迈耶（Eric Meyer）在我第一次遇到这个概念时的措辞，我记得就是这个。当然，它也省略了

a:focus

状态。哈哈，很有趣！我必须试着记住。。。现在，我别无选择！：pso你是说“.element:link”为所有元素提供了一个默认值？它确实应该；所以…我怀疑有其他事情在干扰。你有没有可能发布一篇文章来重现/展示你的问题，我们只需要查看演示问题所需的相关部分@droidus:不，我是说

.element:link

为所有类名为

element

的链接提供了默认值。除非这些样式在其他地方被覆盖（通过

！important

，或更具体的选择器）。@droidus尝试设置

a

的样式，而不仅仅是

div

，尽管我对html和css知之甚少，但它看起来对我有用。看看编辑后的答案，

hr

后面的css就是你需要的。也请继续查看JS Fiddle演示。悬停时，该按钮没有任何作用。它最初也是错误的颜色。

a:link.replyBtn, a:visited.replyBtn, 
a:active.replyBtn, a:hover.replyBtn {...}