Qt 之 样式表的使用——样式选择器（下篇）

一、简述

在上一篇Qt 之 样式表的使用——样式选择器（上篇） 文章中讲述了前四种样式选择器，今天完成剩下的几种选择器的介绍。

二、样式选择器

样式表的样式规则

今天开头先简单讲解一下样式表的样式规则。

Qt文档给出的解释 :A style rule is made up of a selector and a declaration.

简单点就是 选择器 + 样式声明语句 （Selector + Declaration）

每一条样式规则都是由选择器和具体的样式声明语句组成。选择器的作用就是指定哪些控件需要设置声明的样式，而样式声明就是对指定的控件设置什么样的效果。

QPushButton { color: red }

对这条样式规则而言，QPushButton就是选择器，而{ color: red }就是样式声明。

同时Qt样式表在语法上不区分大小写。而类名、控件名、Qt属性名这些是区分大小写的。

如果我们需要对几种控件都设置相同的样式时，简单一点，就是对一条样式声明语句同时用几个选择器，并且用用逗号隔开选择器。

QPushButton, QLineEdit, QComboBox { color: red } 

这样的写法相当于

QPushButton { color: red }QLineEdit { color: red }QComboBox { color: red }

---

选择器包括七种基本类型以及状态选择其和子控件选择器。

对于样式声明语句部分，其实就是一系列的属性:值对。每一条属性：值对用分号隔开，并且所有的属性:值对都放在{ }中。

下面这两条属性：值对之间就是用分号隔开，并且用{ }括起来。

QPushButton { color: red; background-color: white }

这里，我们对样式表的样式规则介绍完了，其实也比较简单，但是这里还是想提一下。好，下面我们就接着介绍剩下的几种选择器。

---

ID选择器 （ID Selector）

ID Selector QPushButton#okButton Matches all QPushButton instances whose object name is okButton.

这里的ID指的就是控件的objectName。主要有两种方式：

A、类型名称 + # + objectName + {“样式”}

限定了作用域，也就是对具体某个类型的控件，如果控件名称为objectName时设置该样式。

B、* + # + objectName + {“样式”}　或者 # + objectName + {“样式”}

不限制作用域，只要控件名称为objectName时设置该样式。

---

关于objectName 这里要提一点，如果我们通过QtDesigner设计界面，在我们命名控件名称时，我们会发现无法将两个控件设置为相同的objectName。比如我们现在有两个按钮，一个按钮的objectName设置为pushButton，然后我们给另一个按钮的objectName也设置为pushButton，这时我们会看到按钮的objectName被设置成了pushButton_2,如果这里有第三个按钮或者其他控件也将objectName设置为pushButton时，这里会默认设置成pushButton_3。

那么是不是无法设置两个控件的objectName一样呢？

这个当然是可以的，那么为什么在QtDesigner中无法将两个控件设置为相同的objectName呢？

因为在QtDesigner中控件的objectName就相当于这个控件的变量名，这里我们可以看一下 ui_stylesheettest.h 这个文件。

这个文件就是由我们的界面文件stylesheettest.ui生成的。当我们修改界面后，编译项目，这个文件就会重新生成，ui_stylesheettest.h这里面就定义了界面上所有的控件，并且如果我们用QtDesigner在界面上修改某个控件的属性（比如显示文字，或者控件大小、位置等），在setupUi方法中都可以看到。

上面提到可以将objectName设置为一样的，那怎么设置呢？

那当然是用代码设置喽（问了等于白问）。

我们使用下面的代码运行之后，我们发现有两个按钮字体颜色设置为红色。

ui.pushButton_2->setObjectName("pushButton");ui.label->setObjectName("pushButton");this->setStyleSheet("QPushButton#pushButton{color:red;}");

我们修改样式，不限制控件类型，再运行。
这时我们发现QLabel控件字体也被设置为红色。

this->setStyleSheet("*#pushButton{color:red;}");

综上

ID选择器顾名思义就是通过objectName属性来选择需要设置样式的控件，而objectName并不是唯一的，多个控件的objectName都可以设置为一样。

ID选择器可以使用属性选择器代替：

QPushButton#pushButton{color:red} 等于 QPushButton[objectName=”pushButton”]{color:red}

---

后代选择器（Descendant Selector）

Descendant Selector QDialog QPushButton Matches all instances of QPushButton that are descendants (children, grandchildren, etc.) of a QDialog.

什么是后代选择器呢？
我们先看一下后代选择器的构成：

选择器 + 选择器 {“样式”}

第一个选择器限定了第二个选择器生效的范围，第二个选择器在第一个选择器的范围内再限定了什么控件设置这个样式。
可能听起来有点绕口，其实就是双重限制，就像下面这样。

Qt文档给我们的例子为 类型选择器 + 类型选择器 {“样式”}。
这里我们也可以用属性选择器 + ID选择器（QWidget[objectName=”widget”] QPushButton#pushButton{color:red}），或者其他选择器的组合。

同时一个选择器也可以由多个选择器构成，比如:
.QWidget[enabled=”true”]#StyleSheetTestClass

这一个选择器就是由类选择器、属性选择器、ID选择器构成。

下面看个例子理解一下：

我们设置如下样式：

QStackedWidget{background:yellow}QStackedWidget QPushButton{color:red}

再设置如下样式：

QStackedWidget{background:yellow}QStackedWidget QAbstractButton{color:red}

---

子选择器（Child Selector）

Child Selector QDialog > QPushButton Matches all instances of QPushButton that are direct children of a QDialog.

选择器 + “>” + 选择器 {“样式”}

我们设置如下样式：

QStackedWidget{background:yellow}QWidget > QPushButton{color:red}

再设置如下样式：

QStackedWidget{background:yellow}QWidget > QAbstractButton{color:red}

---

除了上面列举的七种选择器，我们还可以用控件的子控件或者控件的状态来限制样式的生效范围。

以上两种我们可以称之为子控件选择器和状态选择器。

---

子控件选择器

选择器 + “::” + 子控件{“样式”}

因为有一些控件会包含子控件（比如QComboBox、QCheckBox等），对于这些子控件的样式设置那就需要使用子控件选择器了。

我们设置如下样式：

QComboBox{    background:white;    padding-left:5px;    border: 1px solid rgb(209 , 209 , 209);}QComboBox::down-arrow{    border-image:url(:/StyleSheetTest/Resources/drop_down_Button.png)  ;}QComboBox::drop-down{   border:none;}

上面为设置样式的，下面的未设置任何样式，我们可以对比一下效果。

这里我们用到的子控件分别为down-arrow和drop-down。

我们可以在Qt助手中输入Qt Style Sheets Reference然后选择List of Sub-Controls项查看更多的子控件。

---

状态选择器

选择器 + “:” + 状态{“样式”}

对于一个控件在操作过程中会有多种不同的状态，比如将鼠标悬浮在某个按钮上，就是hover状态，如果用鼠标点击某个按钮没有松开时，就是pressed状态。有时候我们也需要根据不同的状态让控件显示不同的效果，所以就有了状态选择器。

我们设置如下样式：

QPushButton{    color:red;}QPushButton:hover{    color:blue;}QPushButton:pressed{    color:yellow;}

这里我们用到了hover和pressed两种状态，我们在正常状态下给按钮颜色设置为红色，在鼠标悬浮在按钮上时设置为蓝色，在鼠标按下时显示为黄色。

通过这三种状态设置不同的样式，在我们对按钮进行操作时，按钮会给我们不同的反馈，我们就可以根据当前按钮显示的不同效果来判断我们是否进行正确的操作。

在Qt 之 自定义按钮 在鼠标 悬浮、按下、松开后的效果 这一篇文章中讲述了如何自定义按钮不同状态下的效果，有兴趣的小伙伴可以了解一下。

我们可以在Qt助手中输入Qt Style Sheets Reference然后选择List of Pseudo-States 项查看Qt控件支持的所有状态。