css - 为什么 Anchor 仍然使用默认的 css，即使我设置了不同的样式 (GWT)？

Question

在 Gwt 中，我们有这些默认的 Anchor CSS:

在CSS文件中

.gwt-Anchor:link {color:black;}
.gwt-Anchor:visited {color:#00FF00;}

.gwt-Anchor:active {
    color:#0000FF;
}

.gwt-Anchor:hover {
    color:#FF00FF;
    cursor: pointer;
    cursor: hand;
}

这意味着每当我创建一个新 anchor 时，它都会使用默认值。

但我想要一个定制的蓝色。也就是说，我希望一切都与默认 anchor 完全相同，除了 anchor 是蓝色的。

所以我创建了这些:

.blueAnchor:link {color:blue;}
.blueAnchor:visited {color:#00FF00;}

.blueAnchor:active {
    color:#0000FF;
}

.blueAnchor:hover {
    color:#FF00FF;
    cursor: pointer;
    cursor: hand;
}

然后在Java文件中

Anchor loadMoreAnchor=new Anchor("Load More");

loadMoreAnchor.addStyleName(getView().getRes().css().blueAnchor());

loadMoreAnchor 没有发生任何事情，因为它仍然使用默认的 Amchor css。

问题是什么？如果你能修复它，你能告诉我如何避免重复的 css 代码吗？看gwt-Anchor & blueAnchor ，它们相同但有 1 个不同。我们冷做这样的事情:

.blueAnchor:link {color:blue;}
.gwt-Anchor:link {color:black;}
.gwt-Anchor:visited, .blueAnchor:visited {color:#00FF00;}

.gwt-Anchor:active, .blueAnchor:active {
    color:#0000FF;
}

.gwt-Anchor:hover, .blueAnchor:hover {
    color:#FF00FF;
    cursor: pointer;
    cursor: hand;
}

但我不确定我做的是否正确。

注意:这是加载更多 anchor 的实际javascript代码:<a class="gwt-Anchor GEMVVLYDKI" href="javascript:;">Load More</a>

Answer 1

将“!important”添加到您的样式中。

您添加了自己的样式定义，但 GWT 仍然应用其自己的标准样式，并且它们获胜。您要么必须在 GWT CSS 中覆盖这些样式，要么将您自己的样式标记为“!important”。

编辑:

你必须为你的链接指定所有你想要的伪类:

.blueAnchor:link {color:blue !important;}
.blueAnchor:visited {color:#00FF00 !important;}
.blueAnchor:active {color:#0000FF !important;}
.blueAnchor:hover {color:#FF00FF !important;}

您不需要包含您未更改的其他属性(例如光标)。

这就是为什么我更喜欢将 GWT 的标准 CSS 复制到我自己的 CSS 文件中，然后我不在我的应用程序中包含标准 GWT 样式。这样我就可以只对一个文件进行更改，并且两个不同的样式表之间不会发生冲突。