超链接按钮

Question

我正在尝试格式化回复按钮：

.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;
}

背景颜色发生变化。唯一错误的是它显示带下划线的超链接颜色（这是我不希望它拥有的）。此外，悬停在...上时，文字的颜色应变为白色。

Answer 1

在课程前面添加a

a.replyBtn:hover

Answer 2

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元素，然后在.replyBtn:link样式中覆盖这些默认值。我意识到你可能有其他具有相同类名的元素类型，但你应该在a中定义.replyBtn:link / link特定的样式，因此它构成了 all <的默认值/ em>这些链接：

.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>​

你的CSS错了。这个选择器：

.replyBtn:link {
}

选择作为链接的类名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;
}​

JS Fiddle demo

进一步阅读，来自Eric Meyer：

• Who Ordered the Link States?。
• Link Specificity。

Answer 3

我成功应用了我所需的行为

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

在我的页面上，所有链接都按预期显示，即与其css类相关。它正在开发Chrome但不是IE，仍然在努力...... 希望这会有所帮助