为什么即使我使用了不同的样式（GWT），锚仍然使用默认css？

在Gwt中，我们为锚点提供了以下默认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;
}

这意味着每当我创建一个新的锚点时，它都将使用默认的锚点

但是我想要一个蓝色的定制的。也就是说，我希望所有内容都与默认锚点完全相同，只是锚点是蓝色的

所以我创造了这些：

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

但我不确定我做得是否正确

注意：这是loadmore anchor的实际javascript代码：

CSS将是

.gwt-Anchor:link {color:black;}
a.blueAnchor:link {color:blue;}

.gwt-Anchor:visited,
a.blueAnchor:visited{color:#00FF00;}

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

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

请找到有用的JSFIDLE:
请显示html输出。很难看出您是直接引用a标记还是它所在的元素。
@普拉文的回答可能有效，但很难确定。
默认情况下，“A”标记有自己的css规则集，这意味着它们在默认情况下不会选择父规则。
在样式中添加“！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样式。这样，我只能在一个文件中进行更改，两个不同的样式表之间没有冲突。
我不喜欢使用！对于这样的事情很重要，因为它太钝了

主题中的规则“获胜”，因为它在CSS之后到达，因此任何冲突的规则都会被传入的主题覆盖

尝试将html或html正文添加到规则的开头，如中所示：

html body.gwt锚定：链接{color:black；}

这将使规则具有更高的优先级，因为它比主题中的规则更复杂
那么它将与现有的“a”样式混淆如果您仔细查看，我使用的样式都是您定义的样式。我刚刚重新定义了CSS，这样a.gwt-Anchor和a.blueAnchor将按照定义的样式显示，因为我们没有将任何样式定义为：link或a:visted等，所以它不会影响这两个类以外的其他锚。我明白了，问题是您上面实现的样式根本没有显示？或者有一种压倒一切的风格，它不会改变。如果要覆盖，请确保使用！重要的是在样式之后，以确保其在所有其他方面都得到使用。例如背景色：#fff！重要的；用于替代背景色：#000；也许gwt问题不是cssi编辑了我的答案。css由浏览器进行互操作。确保在浏览器中使用开发者工具，以确保一切顺利运行。你有一个活生生的例子，我可以看看吗？我想要一个合适的方式去做，我不想；我不想使用我觉得不合适的代码为什么我们必须使用“a.blueAnchor”？因为即使它可以工作，但它可以打破在未来因为它像黑客代码嗨，它的工作，但所有其他默认的风格都消失了？这意味着锚点是蓝色的，但当我将鼠标移到锚点上时，它并没有像默认锚点那样变成粉红色。这就是伪类在CSS中的工作方式。您必须指定所有这些选项。查看更新。为什么不能“.gwt-Anchor:visted，.blueAnchor:visted{color:#00FF00；}”，如果我喜欢你，那么我们会得到重复的css代码？因为！重要信息.blueAnchor中的after color属性将覆盖.blueAnchor:visited中的颜色。