QSS 选择器

通用选择器 *

* 作为选择器，作用于所有的 widget。

类型选择器

类名 作为选择器，作用于它自己和它的所有子类。

1 2 3

QFrame { background: gray; }

 

类选择器

. + 类名 或者 . + class 的属性值 作为选择器（使用 setProperty(“class”, “QSSClassName”) 设置），只会作用于它自己，它的子类不受影响，注意和类型选择器的区别。

1 2 3 4 5 6

app.setStyleSheet(".QWidget { background: gray; }" ".RedButton { background: magenta; }"); // .RedButton 将作为类选择器 openButton->setProperty("class", "RedButton"); closeButton->setProperty("class", "RedButton");

ID 选择器

# + objectName 作为选择器，只作用于用此 objectName 的对象

1 2 3 4 5 6

// #openButton 和 #closeButton 作为 ID 选择器 app.setStyleSheet(".QWidget { background: gray; }" "#openButton, #closeButton { background: magenta; }"); openButton->setObjectName("openButton"); closeButton->setObjectName("closeButton");

属性选择器

选择器[属性="值"] 作为选择器，这个属性可用通过 object->property(propertyName) 访问的，Qt 里称为 Dynamic Properties。

如上面的程序， openButton 和 closeButton 的背景是洋红色的，但是 saveButton 不受影响，也可以使用属性选择器来实现：

1 2 3 4 5

app.setStyleSheet(".QWidget { background: gray; }" "QPushButton[level='dangerous'] { background: magenta; }"); openButton->setProperty("level", "dangerous");

包含选择器

英语叫做 Descendant Selector，descendant 的表达比较到位。

选择器之间用空格隔开，作用于 Widget 的 子Widget，子Widget 的 子Widget，……，子子孙孙，无穷尽也。

1 2 3 4 5 6 7 8 9 10 11

QFrame { background: gray; } /* 设置 QFrame 中的 QPushButton 的 QSS */ QFrame QPushButton { border: 2px solid magenta; border-radius: 10px; background: white; padding: 2px 15px; }

子元素选择器

选择器之间用 > 隔开，作用于 Widget 的直接 子Widget，注意和包含选择器的区别。

1 2 3 4 5 6 7 8 9 10

QFrame { background: gray; } QFrame > QPushButton { border: 2px solid magenta; border-radius: 10px; background: white; padding: 2px 15px; }

伪类选择器

选择器:状态 作为选择器，支持 ! 操作符，表示 非。

1 2 3

QPushButton:hover { color: white } QCheckBox:checked { color: white } QCheckBox:!checked { color: red }

 

Subcontrol 选择器

选择器::subcontrol 作为选择 Subcontrol 的选择器。

有些 widget 是由多个部分组合成的，例如 QCheckBox 由 icon(indicator) 和 text 组成，可以使用 选择器::subcontrol 来设置 subcontrol 的样式：

1 2 3 4 5 6 7 8

QCheckBox::indicator { width: 20px; height: 20px; } QCheckBox { spacing: 8px; }