anniywell / anniywell.github.io Goto Github PK

QSS简介

QSS称为Qt Style Sheets也就是Qt样式表，它是Qt提供的一种用来自定义控件外观的机制。QSS大量参考了CSS的内容，只不过QSS的功能比CSS要弱很多，体现在选择器要少，可以使用的QSS属性也要少很多，并且并不是所有的属性都可以用在Qt的所有控件上。

QSS使用

使用QWidget的setStyleSheet方法，参数可以是写在代码中的qss字符串，也可以是从qss文件读取的qss字符串

QSS语法

同CSS一样，他也有由selector与declaration组成，selector指定了哪些控件会受到影响，而declaration才是真正的产生作用的语句，表示这些控件的哪些属性会受到影响，如：QPushButton { color: red }

QPushButton是选择器，{ color: red }是声明，该规则指定QPushButton及其子类（例如：MyPushButton）应使用红色作为前景色。

QSS通常不区分大小写（即：color、Color、COLOR、cOloR指同一属性），唯一例外就是类名（class names）、对象名（object names）、属性名（property names）区分大小写。

几个选择器可以指定相同的声明，使用逗号（,）来分隔选择器。例如：QPushButton, QLineEdit, QComboBox { color: red }

相当于三个规则序列：

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

声明部分的规则是一个属性值对（property: value）列表，包含在花括号中，以分号分隔。例如：
QPushButton { color: red; background-color: white }

QSS选择器类型

1. 通配选择器：* ; 匹配所有的控件
2. 类型选择器：QPushButton ; 匹配所有QPushButton和其子类的实例
3. 属性选择器：QPushButton[flat="false"]; 匹配所有flat属性是false的QPushButton实例，注意该属性可以是自定义的属性，不一定非要是类本身具有的属性
4. 类选择器： .QPushButton ; 匹配所有QPushButton的实例，但是并不匹配其子类。这是与CSS中的类选择器不一样的地方，注意前面有一个点号
5. ID选择器： #myButton; 匹配所有id为myButton的控件实例，这里的id实际上就是objectName指定的值
6. 后代选择器： QDialog QPushButton ; 所有QDialog容器中包含的QPushButton，不管是直接的还是间接的
7. 子选择器： QDialog > QPushButton; 所有QDialog容器下面的QPushButton，其中要求QPushButton的直接父容器是QDialog

另外上面所有的这些选择器可以联合使用，并且支持一次设置多个选择器类型，用逗号隔开，这点与CSS一样，例如#frameCut,#frameInterrupt,#frameJoin 表示所有这些id使用一个规则。#mytable QPushButton 表示选择所有id为mytable的容器下面的QPushButton实例

子控件

QComboBox::drop-down { image: url(dropdown.png) }
QComboBox#myQComboBox::drop-down { image: url(dropdown.png) }

伪选择器

选择器可以包含伪状态，意味着限制基于部件状态的应用程序规则。伪状态出现在选择器后面，用冒号（:）关联。例如，鼠标划过按钮：QPushButton:hover { color: white }