0

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

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

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

4

3 回答 3

0

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

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

在我的页面上，所有链接都按预期显示，即相对于它们的 css 类。它在 Chrome 上工作，但不是 IE，仍在工作......希望这会有所帮助

于 2012-04-05T06:00:24.773 回答
0

a在类前面添加

a.replyBtn:hover
于 2012-04-04T20:19:33.587 回答
0

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/link-specific 样式，因此它形成所有这些链接.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>​

你的 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 小提琴演示。

进一步阅读，来自 Eric Meyer：

于 2012-04-04T20:22:30.320 回答