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＆amp; blueAnchor，它们是相同的但有一个不同。我们冷做的事情如下：

.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代码：<a class="gwt-Anchor GEMVVLYDKI" href="javascript:;">Load More</a>

Answer 1

添加＆＃34;！important＆＃34;你的风格。

您添加了自己的样式定义，但GWT仍然使用自己的标准样式，并且赢了。您必须在GWT CSS中覆盖这些样式，或将您自己的样式标记为＆＃34;！important＆＃34;。

编辑：

您必须指定链接所需的所有伪类：

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

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

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

Answer 2

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

请找到有用的jsfiddle：http://jsfiddle.net/9GLG8/1/

Answer 3

请显示html输出。很难看出你是直接引用一个标签还是它所在的元素。 @ pravin的回答可能有用，但很难说肯定。＆＃34; A＆＃34;默认情况下，标签有自己的css规则集，这意味着默认情况下它们不会选择父规则。

Answer 4

我不喜欢使用！对于这样的事情非常重要，因为它太过钝了。

主题中的规则“获胜”，因为它来自您的CSS，因此任何冲突的规则都被传入的主题覆盖。

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

html body .gwt-Anchor：link {color：black;}

这将使规则更具优先权，因为它比主题中的规则更复杂

为什么Anchor仍然使用默认的css，即使我的风格不同（GWT）？

4 个答案: