原文地址 zhuanlan.zhihu.com

qss语法

目录收起一、QSS介绍二、基本语法三、选择器五、类选择器六、ID 选择器七、后代选择器八、子元素选择器九、属性选择器十、子控件选择器

一、QSS介绍

如果学过前端的话，QSS(Qt style sheet)就很好理解了。QSS 是一个非常强大的用于自定义控件外观的机制.它的概念,术语以及语法都是受到了 HTML CSS 的启发。 QSS是用来设置界面样式的, 设置的方法就是类似于 CSS,通过以一定规则组织的字符串来给界面设置样式, 而不用我们调用控件对象的接口或子类化 QStyle 去设置样式。

二、基本语法

样式表由一系列的样式规则组成。一条样式规则由一个选择器和一个声明语句组成，选

择器指明了哪个（或者说是哪种）控件将会受规则影响，而声明语句则指明了哪些属性会设

置到这个（这些）控件. 语法如下:

selector { attribute: value; }

在上面这条语句中, selector 代表选择器, 指明了哪个(或者说是哪种)控件将会受到

规则影响. {attribute: value;}代表声明语句, 其中 attribute 表示属性, value 表示该

属性的值, 属性与它的值之间必须以冒号( : )隔开, 属性值后面必须以分号( ; )结束,

表示这条属性已经设置完成.

举个例子：

QPushButton{ color: red;}

//表示将我们的应用程序中所有的 QPushbutton 对象以及它

//的子类对象应该使用 red 作为它们的前景色(即字体的颜色);

三、选择器

又叫通配符选择器，通用选择器用( * )来表示, 它表示匹配程序中所有的 widget，格式如下

举个例子，将程序中所有 widget 的字体大小都设置为 20px 大小, 字体采用微软雅黑.：

*{font: normal 20px “微软雅黑” ;}

四、类型选择器

格式：

类名 { 属性: 值; }

类名即 Widget 类名, 由 QObject :: metaObject() :: className()获取, 类型选择器匹配所有该类以及该类的派生类的对象，举个例子:

QPushButton {color: blue;}

// 这条语句表示, 程序中所有的 QPushButton 类和它的派生类的对象, 它们的前景色(即文字

// 颜色)被设置为蓝色.

Qt 样式表使用 widget 的 QObject::className()来决定何时应用类型选

命名空间之中(或它是一个嵌套类)， QObject::className()会返回( :: ),选择器相冲突. 为了解决这个问题，当为命名空间中 widget 使用类将” :: ”替换成” -- ”, 下面即将介绍的类选择器也是一样. 例子如下:

类型选择器会匹配所有该类以及该类的派生类的对象, 所以我们在程序中, 有时为了统一那些具有相似性的控件的样式, 可以使用类型选择器, 如, 我们想要为 QSpinBox,QDoubleSpinBox, QDateTimeEdit, QTimeEdit, QDateEdit 等这些编辑框的控件设置一些相同的样式, 因为它们都是 QAbstractSpinBox 类的派生类, 因此可以如下写:

QAbstractSpinBox{

min-height: 30px;

max-height: 30px;

border-width: 1px;

rder-style: solid;

order-color: gray;

padding: 0px;

}

五、类选择器

格式：

.类名 { 属性: 值; }

这里的类名与类型选择器中的类名一样, 不同的是, 类选择器的类名前面有一个( . ), 这种

选择器只会匹配该类的所有对象, 而不会匹配其派生类的对象.

举个例子：

.QPushButton{

color: blue;

}

六、ID 选择器

格式:

id{ 属性: 值; }

这里的 id 指的是 objectName, 每个 QObject 类及其派生类都有的一个属性, “#” + objectName

构成了我们的 ID 选择器, 它匹配所有 objectName 为 ID 选择器所指定的名称的对象, 为其设

置样式. 例如

button_1{

color: red;

}

注意点:

objectName 是大小写敏感的.
“#”与 ID 之间不可以有空格
由于 objectName 是所有 QObject 类对象的一个属性, 在运行过程中可以改变, 所以一般
情况下, 要使用 ID 选择器时, 保证 objectName 不要在运行时被改变, 否则重新加载
stylesheet 文件时, 对应的 ID 选择器将不会匹配到原来的控件.
由于 objectName 允许字符串中含有空格, 但是 ID 选择器中, ID 是从紧跟#后的第一个字
符开始直到遇到空格或“{”之间的字符串, 因此, 如果是为了使用 ID 选择器而设置
objectName, 则 objectName 中不能含有空格
由于任何对象的 objectName 都可以出现重复, 因此在设置 objectName 时, 尽量保持其
唯一性
Qt 官方给出的 ID 选择器的格式为:

类名#id{ 属性: 值; }

但实际上不加类名也是可以的(加了类名的 ID 选择器在 CSS 中被称为交集选择器),在正

式开发中, 还是建议加上类名, 因为这样可以看出这个 id 选择器所匹配的对象的类型,

有利于提高阅读性。基于以上特点, 我们在设置 objectName 时, 一般使用下划线”_”连接的多个单词表明此对象的功能

QPushButton#settings_popup_fileDialog_button{

min-height: 31px;

min-width: 70px;

border: 1px solid black;

color: #F0F0F0;

min-height: 10px;

border-radius:3px;

background: qlineargradient(spread:pad, x1:0, y1:0, x2:0, y2:1,

stop:0 #454648, stop:1 #7A7A7A);

}

七、后代选择器

格式：

选择器 1 选择器 2{ 属性: 值; }

这个选择器表示: 在选择器 1 匹配的所有对象中, 找到选择器 2 所匹配的所有后代对象, 并

给它们设置样式

注意点:

后代选择器必须用空格隔开每个选择器
后代选择器可以通过空格一直延续下去, 例如:
选择器 1 选择器 2 选择器 3 … 选择器 N
顾名思义, 后代选择器不仅包含”儿子”, 还包含”孙子”, “重孙子”等, 一般来说, 只要 B 控
件显示在 A 控件上, 那么 B 控件就是 A 控件的后代.
后代选择器不仅可以使用类型选择器, 还可以使用类选择器, id 选择器等.
Qt 中, 各控件的父子关系:各控件的父子关系并非我们在创建对象时所指定的那样, 实际父子关系取决于如何布局.

举个例子：

后代选择器一般用于指定特定类的后代的样式, 例如在我的应用程序中, 有很多个相似的对

话框, 它们中包含一些样式相同的按钮, 那么我可以使用后代选择器为他们指定样式, 例如:

BaseDialog QPushButton{

min-width: 120px;

min-height: 40px;

max-width: 120px;

max-height: 40px;

font-size: 20px;

padding: 0px;

}