前言
在CSS中,选择器是一种模式,用于选择需要添加样式的元素,在JavaFX CSS中有四种选择器,下面由小编来给大家一一讲解。
一、类型选择器(TypeSelector)
大部分JavaFX控件类都对应一个CSS Type,我们可以使用类型选择器来控制类型控件的外观。对应的命名为:将JavaFX的类名给改成首字母小写,如果有多个单词拼接的类名,将每个单词原来大写的首字母小写然后用连字符将多个单词连接。如:
JavaFX Class | CSS Type class |
Button | button |
Label | label |
CheckBox | check-box |
TextField | text-field |
... | ... |
类型选择器的用法如下:
.label{
-fx-text-fill:red
}
这样我们就将应用了这个CSS文件的FXML文件里的所有label的文字样式都设置成了红色。
二、类选择器(Class selector)
在Javafx中有些控件是没有自己的类型选择器的,这个时候要定义要是可以实用类选择器,给相应的控件设置样式。类选择器可以应用到多个控件上,只要在相应的控件里加上StyleClass即可。
类选择器用法如下:
.background-color{
-fx-background-color:black;
}
这样就定义了一个background-color的类型选择器,对于Node的任意子类都有一个getStyleClass 的方法,可以通过getStyleClass().add("background-color");,也可以在FXML文件上可以通过StyleClass标签添加background-color这个选择器的样式。类选择器会覆盖类型选择的样式。
三、ID选择器
ID选择器由#开始进行定义,一般情况下一个ID选择器对一个唯一一个控件。
ID选择器的用法如下:
#ok-button{
-fx-font-color:rgb(255,0,0,0);
-fx-font-size:25px;
}
这个时候ID为okbutton的Button,通过这个ID选择器改变样式。
四、伪类选择器(CSS Pseudo-class)
伪类的语法为:selector : pseudo-class {property: value}
比如我们设置当鼠标移动到Button上是背景颜色变成灰色:
.button:hover{
-fx-background-color:gray;
}
JavaFx 中的伪类选择器大概有以下几种:
- disabled
- focused
- selected
- hover
- empty
- pressed
- show-mnemonic
总结
JavaFX CSS文档不是很全,摸索的地方很多,还是得在项目中多用多积累经验,这样才能熟能生巧。