Qt控件的装饰器:QSS选择器、伪状态简介

什么是QSS

看这个名字，就能知道QSS与CSS之间的是儿子和老子的关系，两者都起到对界面中各控件（元素）装饰美化的一个作用，在选择器、伪状态、声明语法上，QSS是CSS的一个子集。可以这么理解，有了CSS的基础，只需要简单了解一下QSS的组成即可。

QSS三大核心

选择器

选择器表示对哪些满足条件的控件进行装饰。如QPushButton这个选择器，就表示所有QPushButton及其子类控件实例对象，都被选中。

伪状态

伪状态表示对哪些处于某种状态的控件进行装饰，当控件不在该状态时取消该装饰效果。如：checked表示被选中的按钮状态，当满足选择器条件的按钮被选中时，就会进行装饰。

声明

所谓声明，即表示对控件实施哪种何种装饰，如QPushButton{background-color:red;}中{}及其扩起来的部分，就是声明，关于声明的语法以及具体的样式，均与CSS的一致，在本文中不会进行具体讲解，可以参考CSS的相关文档进行学习，本文主要讲解选择器和伪状态。

选择器讲解

通配符选择器

与许多工具（如正则表达式）的通配符一样，这里的通配符*表示匹配所有，如 *{background-color:red;} 表示对设置样式的控件及其内部所有子控件均设置背景为red。
测试代码：

from PyQt5.Qt import *
import sys


class MyWidget(QWidget):
    def __init__(self):
        super().__init__()
        self.setWindowTitle("QSS测试案例")
        self.resize(500, 500)
        self.setupUi()

    def setupUi(self):
        self.test1()

    # 选择器测试函数1
    def test1(self):
        # 加两个Widget 里面控件摆放的位置都一样
        layout = QVBoxLayout(self)
        box1 = QWidget(self)
        box2 = QWidget(self)
        layout.addWidget(box1)
        layout.addWidget(box2)
        lb1 = QLabel("标签1", box1)
        lb1.move(100,100)
        btn1 = QPushButton("按钮1", box1)
        btn1.move(200,100)

        lb2 = QLabel("标签2", box2)
        lb2.move(100, 100)
        btn2 = QPushButton("按钮2", box2)
        btn2.move(200, 100)

        # 对主窗体设置样式
        self.setStyleSheet("*{background-color:red;}")

if __name__ == "__main__":
    app = QApplication(sys.argv)
    window = MyWidget()
    window.show()
    sys.exit(app.exec_())

运行效果：

可以看到，界面中所有控件都被设置为了red背景色，需要注意的是，父控件设置QSS样式，则在父控件及其子控件中也进行相应的筛选，表示样式作用在哪个范围内。

类型选择器

类型选择器将选择某一类种类型的控件（该类为根的所有子节点也被选择），如QWidget{background-color:blue;}将会把当前控件内部，所有QWidget类及其子类的控件均设置blue背景色。这次只对box1进行设置。
test1函数改为：

    def test1(self):
        # 加两个Widget 里面控件摆放的位置都一样
        layout = QVBoxLayout(self)
        box1 = QWidget(self)
        box2 = QWidget(self)
        layout.addWidget(box1)
        layout.addWidget(box2)
        lb1 = QLabel("标签1", box1)
        lb1.move(100,100)
        btn1 = QPushButton("按钮1", box1)
        btn1.move(200,100)

        lb2 = QLabel("标签2", box2)
        lb2.move(100, 100)
        btn2 = QPushButton("按钮2", box2)
        btn2.move(200, 100)

        # 对主窗体设置样式
        self.setStyleSheet("*{background-color:red;}")
        # 对box1设置样式
        box1.setStyleSheet("QWidget{background-color:blue;}")

运行效果：

可以看出，box1的区域被设置为了blue背景色，这里也与CSS一样，同类样式遵循就近原则，不同样式遵循叠加原则。

类选择器

类型选择器是通过类名，会作用到子类，那只想对某种类型的控件进行设置，就需要类目选择器，只需要在类名前加上一个点.就可以了，如.QPushButton{background-color:green;}就表示只设置所有btn的背景，不会作用到子类上，请读者自行测试验证其效果。

id选择器

在CSS中，id选择器是选择满足id属性满足条件的控件，在QT中，id选择器则是选择满足objectname满足条件的控件，如#btn{background-color:green;}会将所有通过setObjectName设置为btn的控件背景设置为green。
test1测试代码:

    def test1(self):
        # 加两个Widget 里面控件摆放的位置都一样
        layout = QVBoxLayout(self)
        box1 = QWidget(self)
        box2 = QWidget(self)
        layout.addWidget(box1)
        layout.addWidget(box2)
        lb1 = QLabel("标签1", box1)
        lb1.move(100,100)
        btn1 = QPushButton("按钮1", box1)
        btn1.move(200,100)

        lb2 = QLabel("标签2", box2)
        lb2.move(100, 100)
        lb2.setObjectName("btn")
        btn2 = QPushButton("按钮2", box2)
        btn2.move(200, 100)
        btn2.setObjectName("btn")
        # 对主窗体设置样式
        self.setStyleSheet("*{background-color:red;}")
        # 对box1设置样式
        box1.setStyleSheet("QWidget{background-color:blue;}")
        # 对box2设置样式
        box2.setStyleSheet("#btn{background-color:green;}")

运行效果：

此时会发现，将lb2与btn2的背景色覆盖成了green，也验证了前面所说的同类样式的就近原则。

属性选择器

属性选择器常与动态属性相配合，通过setProperty可以设置相关的属性，语法格式如下：*[level= 'error']{ border:3px solid yellow; }表示当前控件中，所有设置了level属性为error的控件，都被加上3px的黄色边框。
test1测试代码：

    def test1(self):
        # 加两个Widget 里面控件摆放的位置都一样
        layout = QVBoxLayout(self)
        box1 = QWidget(self)
        box2 = QWidget(self)
        layout.addWidget(box1)
        layout.addWidget(box2)
        # 对两个box设置控件
        lb1 = QLabel("标签1", box1)
        lb1.move(100,100)
        btn1 = QPushButton("按钮1", box1)
        btn1.move(200,100)
        lb2 = QLabel("标签2", box2)
        lb2.move(100, 100)
        lb2.setObjectName("btn")
        btn2 = QPushButton("按钮2", box2)
        btn2.move(200, 100)
        btn2.setObjectName("btn")
        lb1.setProperty("lb","lb1")
        # 对主窗体设置样式
        self.setStyleSheet("*{background-color:red;}")
        # 对box1设置样式
        box1.setStyleSheet("QWidget{background-color:blue;}*[lb='lb1']{border:3px solid yellow;}")
        # 对box2设置样式
        box2.setStyleSheet("#btn{background-color:green;}")

运行效果图：

子控件选择器

这个选择器用来设置复合控件中的子控件，如QSpinBox、QDateEdit等复合控件，里面都有上下的小按钮(up-button、down-button)，语法如下QSpinBox::up-button{ border:1px solid red; image:url("1.png"); }表示将QSpinBox里面向上的按钮添加样式。
test1代码:

    def test1(self):
        # 加两个Widget 里面控件摆放的位置都一样
        layout = QVBoxLayout(self)
        box1 = QWidget(self)
        box2 = QWidget(self)
        layout.addWidget(box1)
        layout.addWidget(box2)
        # 对两个box设置控件
        lb1 = QLabel("标签1", box1)
        lb1.move(100,100)
        btn1 = QPushButton("按钮1", box1)
        btn1.move(200,100)
        lb2 = QLabel("标签2", box2)
        lb2.move(100, 100)
        lb2.setObjectName("btn")
        btn2 = QPushButton("按钮2", box2)
        btn2.move(200, 100)
        btn2.setObjectName("btn")
        lb1.setProperty("lb","lb1")
        # 加一个复合控件到box2里面
        sp = QSpinBox(box2)
        sp.move(300,100)
        # 对主窗体设置样式
        self.setStyleSheet("*{background-color:red;}")
        # 对box1设置样式
        box1.setStyleSheet("QWidget{background-color:blue;}*[lb='lb1']{border:3px solid yellow;}")
        # 对box2设置样式
        box2.setStyleSheet("#btn{background-color:green;}QSpinBox::up-button{background-color:blue;image:url('1.png');}")

效果图:

后代选择器

选择一个控件中所有满足条件的后代控件（子控件以及子控件的子控件…可以无限套娃），语法格式如下QWidget.QLabel{background-color:gray;}，请读者自行测试验证其效果。

子选择器

选择一个控件中所有满足条件的子控件（只有子控件!!!），语法格式如下：QWidget>QLabel{background-color:gray;}，请读者自行测试验证其效果。更多更详细的内容请参考 Qt 的帮助文档，搜索 Qt Style Sheets Reference进行查看。

伪状态讲解

伪状态配合选择器，可以让控件在不同的状态下表现出不同的样式。常见的伪状态有：
:disabled Widget 被禁用时
:enabled Widget 可使用时
:focus Widget 得到输入焦点
:hover 鼠标放到 Widget 上
:pressed 鼠标按下时
:checked 被选中时
:unchecked 未选中时
可以在QT文档中查看更多关于伪状态的描述。
此处对box1中的QLabel设置样式为QLabel:hover{background-color:yellow;}，对box2中的QPushButton设置样式为QPushButton:hover{border:3px solid yellow;}，当鼠标在lb1与btn2上面时，两者的样式会改变，鼠标离开时两者样式会恢复原状，读者可自行测试验证其效果。