JavaFX的CSS id選擇與類選擇不工作

編輯（2016年9月5日）：JavaFX的CSS id選擇與類選擇不工作

檢查我已經寫了答案..

第1部分

我使用這個CSS爲應用程序的所有TabPanes：

.tab-pane .tab-header-area .tab-header-background { 
    -fx-opacity: 0.0;  
} 


.tab-pane{ 
    -fx-tab-min-width:90.0px; 
} 


.tab-pane .tab{ 
-fx-background-color: orange; 
-fx-background-radius:0.0 20.0 0.0 20.0; 
-fx-focus-color: transparent; 
-fx-faint-focus-color: transparent; 
} 

.tab-pane .tab:selected{ 
    ..... 
} 

.tab .tab-label { 
    ..... 
} 

.tab:selected .tab-label { 
    .... 
}

第2部分）

但我有一個TabPane與ID = 「SpecialTabPane」，我希望它有不同的CSS值，以便可以costumized：

#SpecialTabPane.tab{ 
    -fx-background-color:cyan; 
    -fx-background-radius:20 20 0 0; 
    -fx-padding:3em 0em 3em 0em; 
    -fx-cursor:hand; 
} 

#SpecialTabPane.tab:selected{ 
    -fx-background-color:magenta; 
}

問題

第2部分css更改所有TabPanes.Why發生這種情況？ 它只能選擇使用id = 「SpecialTabPane」和類選擇的tabPane = ...我使用Java 1.8_91

編輯「選項卡。」：

我發現它有答案用CSS來做，以及孩子是如何從父母那裏繼承的。

來源

2016-04-29 GOXR3PLUS

你可以創建一個[MCVE]？它看起來應該可以工作，但讓一個選項卡窗格爲'tab'的樣式類有點奇怪;因爲各個選項卡已經具有該類別。 –

@James_D我想使TabPane與這個ID不同於其他TabPanes在這裏，我只給出了標籤的CSS，但我想改變和其他東西像旋轉標籤的文本標籤，但我只希望這個TabPane 。實際上，第2部分的代碼在ID和.tab之間沒有空格的情況下根本不起作用...感謝您的幫助。 – GOXR3PLUS

但正如你所說，你將id應用於* tab pane *，而不是* tab *。除非你明確地將樣式類'tab'添加到* tab面板*（這會很奇怪），否則選擇器不應該選擇任何東西。發佈[MCVE]。 –

我認爲這可能對別人有用，所以我發佈了答案。

是我想要實現這一目標是：

的問題是，我有一個TabPane其中有一個兒童另一TabPane所以孩子從父母繼承的CSS值。

我已經修改了CSS（但使用此之前，你必須添加這個的Java代碼）：

parentTabPane.setId("SpecialTabPane"); 
parentTabPaneTab.setId("STab");

CSS代碼：

#SpecialTabPane #STab.tab .tab-label{ 
    -fx-text-fill:white; 
    -fx-rotate:90.0; 
} 

#SpecialTabPane #STab.tab:selected .tab-label{ 
    -fx-text-fill:white; 
} 

#SpecialTabPane #STab.tab{ 
    -fx-background-color:black; 
    -fx-background-radius:20.0 20.0 0.0 0.0; 
    -fx-padding:3.0em 0.0em 3.0em 0.0em; 
    -fx-cursor:hand; 
    -fx-effect: innershadow(two-pass-box, white, 15.0, 0.0, 0.0, 0.0); 
}

解釋一些CSS的：

讓我們來說這段代碼：

#SpecialTabPane #STab.tab

[對於id選擇 #SpecialTabPane具有與ID #Stab和類選擇一個子項.TAB這樣做的每一項.....]

這是關鍵，如果你刪除#STAB它選擇所有標籤從父TabPane和兒童TabPanes

來源

2016-05-09 18:18:28 GOXR3PLUS

首先，您需要了解您試圖設計的組件的結構。如果您尚未下載，請下載Scenic View並使用它來檢查組件，以便了解TabPane的不同部分是如何組織的以及哪些樣式適用於不同部分。

然後，您需要在選擇器上工作，以便找到要更改的特定類。您正在尋找一個.tab，它是ID爲SpecialTabPane的組件的後代。您可以使用後代選擇器（稱爲「SpecialTabPane組件下方的選項卡」）或使用查找特定子項的子選擇器來執行此操作。

後代選擇是：

#SpecialTabPane .tab {

注意ID和.TAB之間的空間，否則，你只是添加標籤類的SpecialTabPane本身。

孩子選擇會是這樣，例如：

#SpecialTabPane > .tab-header-area > * > .tab {

使用子選擇器通常提供更好的性能，更準確，因爲它的目標成分的特定組合，避免了不想要的結果。對於後代版本，您所說的.tab級別的組件在任何地方出現SpecialTabPane必須使用該樣式，這可能不是您想要的。

來源

2016-04-29 20:09:38 ctg

我會檢查這個和...感謝您的幫助 – GOXR3PLUS

我已經找到了我想要的東西！ – GOXR3PLUS

JavaFX的CSS id選擇與類選擇不工作

回答

相關問題