JavaFX——CSS选择器

  前言

   在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文档不是很全，摸索的地方很多，还是得在项目中多用多积累经验，这样才能熟能生巧。