爲什麼錨仍然使用默認的CSS，即使我以不同的方式設計它（GWT）？

GWT中，我們對這些默認的CSS錨：爲什麼錨仍然使用默認的CSS，即使我以不同的方式設計它（GWT）？

在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是藍色的。在Java中文件

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

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

沒有發生在loadMoreAnchor因爲它仍然使用默認Amchor CSS

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

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

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

然後：

所以我創建了這些。

什麼問題？如果你可以修復它，你還可以告訴我怎麼做，以避免重複的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錨實際JavaScript代碼：<a class="gwt-Anchor GEMVVLYDKI" href="javascript:;">Load More</a>

來源

2014-03-25 Tum

爲您的風格添加「！重要」。

您可以添加自己的樣式定義，但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樣式。這樣我只能在一個文件中進行更改，並且兩個不同樣式表之間沒有衝突。

來源

2014-03-25 13:04:09

嗨，它的工作，但所有其他默認樣式都消失？這意味着Anchor是藍色的，但是當我將鼠標懸停時，它並沒有像默認的那樣變成粉紅色。 – Tum

這是僞類在CSS中的工作方式。你必須指定它們全部。查看更新。 –

爲什麼不能「.gwt-Anchor：visited，.blueAnchor：visited {color：＃00FF00;}」，如果我喜歡你，那麼我們有重複的CSS代碼？ – Tum

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/

來源

2014-03-25 10:23:23

中的規則更加複雜，那麼如果仔細觀察，它會與現有的「a」風格 – Tum

混淆在一起我已經使用了那些已由您定義的樣式。我只是重新定義了CSS，a.gwt-Anchor和a.blueAnchor將按照樣式定義，因爲我們沒有將任何樣式定義爲：link或a：visited等，所以它不會影響到其他錨點這兩個類 –

請出示HTML輸出。很難看出你是直接引用了一個標籤還是它所在的元素。 @ pravin的答案可能有效，但很難說清楚。默認情況下，「A」標籤默認擁有自己的一組css規則，這意味着它們在默認情況下不會選擇父規則。

來源

2014-03-25 10:40:35 jollins

完成：請參閱注意：在更新的問題 – Tum

好吧，只是所以我明白，問題是，上面實現的樣式根本沒有顯示？或者有一個壓倒一切的風格，它不會改變。如果您重寫，請確保在樣式之後使用！important，以確保其在其他方面的使用。例如background-color：#fff！important;被用來代替背景顏色：＃000; – jollins

也許gwt問題不是css – Tum

我不喜歡使用！對於這樣的事情很重要，因爲它太鈍了。

主題中的規則「勝出」，因爲它到達了CSS之後，因此任何衝突規則都被傳入主題覆蓋。

嘗試添加HTML或HTML正文你規則的開頭，如：

HTML體.gwt錨點：鏈接{顏色：黑色;}

，這將使更多的規則優先，因爲它比主題

來源

2014-03-25 15:04:38 stevec

爲什麼錨仍然使用默認的CSS，即使我以不同的方式設計它（GWT）？

回答

相關問題