QT之样式表（样式表规则以及使用大全）

小鱼儿 2023-10-09 10:36 21阅读 0赞

1、QT样式表可以让你自定义任何一个QT控件的样式包括颜色、边框、背景等等（你想的到样式都可以），Qt样式表的概念、术语和语法与HTML的CSS样式表类似。

2、样式表是文本规范，

（1） QApplication::setStyleSheet()在整个应用程序上设置，一般在main()函数中：

QFile file(":/qss/abc.qss"); //工程控件样式表需要在qss/abc.qss里面

file.open(QFile::ReadOnly);

styleSheet = QLatin1String(file.readAll());

qApp->setStyleSheet(styleSheet);

file.close();

（2）一般形式也可以使用QWidget::setStyleSheet()在特定小部件(及其子部件)上设置。

例如:

QPushButton \*btn = new QPushButton();

Btn-> setStyleSheet(“color : red”);//表示字体颜色为红色

如果在不同级别上设置了多个样式表，Qt将从所有设置的样式表派生有效样式表。这称为级联。

（3）在QT Designer 中设置

例如：在要修改样式的控件右击->改变样式表

针对单个控件按钮

也可也在顶级窗口右击控件->改变样式表

针对该窗口中所有的QLineEdit

二、样式表语法

**样式的规则1**：样式规则由选择器和声明组成。选择器指定哪些小部件受规则影响;声明指定应该在小部件上设置哪些属性。

如：QPushButton \{ color : red \}。

其中QPushButton就是选择器，'\{ color : red \}'是声明部分。 color就是属性，red就是指定给该属性的值。

该语句的意思是QPushButton及其子类的前景色是红色。

注意：Qt样式表通常不区分大小写，除了类名、对象名和Qt属性名。

**样式的规则2**：可以为同一个声明指定多个选择器，使用逗号(，)分隔选择器。

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

**样式的规则3**：声明多个属性。在\{\}里面，用 ; 分割

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

**样式的规则4**：选择器

（1）通用选择器

格式

\* \{ 属性: 值; \}

通用选择器用( \* )来表示, 它表示匹配程序中所有的 widget.

例如：\*\{font: normal 20px “微软雅黑”;\}

这条语句表示将程序中所有 widget 的字体大小都设置为 20px 大小, 字体采用微软雅黑.

（2）类型选择器

格式

类名 \{ 属性: 值; \}

类名即 Widget 类名, 由 QObject :: metaObject() :: className()获取, 类型选择器匹

配所有该类以及该类的派生类的对象.例如:

QPushButton\{ color: blue; \}

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

颜色)被设置为蓝色.

（3）类选择器

格式

.类名 \{ 属性: 值; \}

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

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

.QPushButton\{ color: blue; \}

（4）ID 选择器

格式

\#id\{ 属性: 值; \}

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

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

置样式. 例如:

\#button\_1\{ color: red; \}

（5）后代选择器

格式

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

这个选择器表示: 在选择器 1 匹配的所有对象中, 找到选择器 2 所匹配的所有后代对象, 并 给它们设置样式.

**注意点:**

1. 后代选择器必须用空格隔开每个选择器

2. 后代选择器可以通过空格一直延续下去, 例如:

选择器 1 选择器 2 选择器 3 … 选择器 N\{ 属性: 值; \}

3. 顾名思义, 后代选择器不仅包含”儿子”, 还包含”孙子”, “重孙子”等, 一般来说, 只要 B 控

件显示在 A 控件上, 那么 B 控件就是 A 控件的后代.

4. 后代选择器不仅可以使用类型选择器, 还可以使用类选择器, id 选择器等.

5. Qt 中, 各控件的父子关系:

通过简单的验证, 各控件的父子关系并非我们在创建对象时所指定的那样, 实际父子关

系取决于如何布局.

例如：

BaseDialog QPushButton\{

min-width: 120px;

min-height: 40px;

max-width: 120px;

max-height: 40px;

font-size: 20px;

padding: 0px;

（6）子元素选择器

格式

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

子元素选择器表示找到指定选择器所匹配的对象中的所有特定直接子元素然后设置属性,

即找到选择器 1 匹配到的对象中的被选择器 2 匹配盗的直接子元素然后设置属性

**注意点** **：**

1. 子元素选择器必须用”>”连接, “>”两边有没有空格都可以, 但是不建议写空格, 因为会与

后代选择器的连接符混淆.

2. 子元素选择器只会查找”儿子”, 不会查找其他后代.

3. 子元素选择器不仅可以使用类型选择器, 还可以使用类选择器,id 等选择器

4. 子元素选择器不能通过”>”一直延续下去, 只能有一个”>”

5. 由于 Qt 中有继承关系的 Widgets 较多, 在使用子元素选择器时, 请特别注意继承关系,

比如我只想选中 QGroupBox 中的 QPushButton, 那么我即可以写成

QWidget >QPushButton\{color: red;\} ○1

也可以写成

QGroupBox>QPushButton\{color: red;\} ○2

这是因为 QGroupBox 是 QWidget 的派生类, 类型选择器 QWidget 会选中所有它的派生

类对象,这些对象中包括 QGroupBox, 因此写法○1 会将所有的 QPushButton 的前景

色设置为红色.

鉴于此种情况, 我推荐在使用子元素选择器时, 使用类选择器替代类型选择

器

一般用法

子元素选择器一般用于一些特定布局条件中的控件, 例如我想给直接布局在 QGroupBox 的

QCheckBox 设置一些特定属性, 那么可以这样做:

.QGroupBox > .QCheckBox\{

color: blue;

（7）属性选择器

格式

\[attribute=value\]\{ 属性: 值; \}

\[attribute|=value\]\{ 属性:值; \}

\[attribute~=value\]\{ 属性:值; \}

attribute=value 表示匹配有特定属性 attribute, 并且值为 value 的所有控件, 然后设置样式;

attribute|=value 表示匹配有特定属性 attribute, 并且值以 value 开头的所有控件, 然后设置样式;

attribute~=value 表示匹配有特定属性 attribute, 并且值包含 value 的所有控件, 然后设置样 式;

**注意点** **：**

1. attribute|=value 表示 attribute 属性的值以 value 开头, 无论 value 后面还有没有值, 或者 value 后面是什么, 均能匹配到, 例如:

\[objectName|="button"\]\{ color: red; \}

这表示将 objectName 属性以 button 开头的所有控件的前景色设置为红色.

attribute~=value 表示 attribute 属性的值中包含 value, 这里要注意的是:value 必须是独

立的单词, 也就是包含 value 并且 value 是被空格隔开的, 例如:

\[objectName~="button"\]\{ color: red; \}

（9）并集选择器

格式

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

并集选择器表示, 将每个单独选择器匹配到的控件放在同一个结果集中, 并给结果集中的每

个控件都设置声明语句中的样式.

**注意点**

1. 并集选择器必须使用”,”来连接不同的选择器

2. 并集选择器可以使用类选择器, 类型选择器, id 选择器, 属性选择器等.

一般用法

主要用于给具有相同属性并且外观相似的的控件设置样式, 例如:

.QLineEdit, .QComboBox\{

border: 1px solid gray;

background-color:white;\}

（10）伪类选择器

格式

类型选择器:状态\{ 属性: 值; \}

类选择器:状态\{ 属性: 值; \}

表示对类型选择器或类选择器指定的所有控件设置它在指定状态时的样式.

选择器也许会包含基于 widget 的 state 的程序限制规则的伪状态。伪状态以冒号(:)作为分隔 紧跟着选择器。举个例子，下面的规则在鼠标悬浮在 QPushButton 的上方时生效：

QPushButton:hover \{ color: white \}

伪状态可以使用感叹号进行取反，下面一条规则在鼠标没有悬浮在 QRadioButton 上方时生

效：

QRadioButton:!hover \{ color: red \}

伪状态可以链接，在这样的情况下，隐式地包含了逻辑与。

举个例子，下面一条规则在鼠标

悬浮到一个已 check 的 QCheckBox 上时生效：

QCheckBox:hover:checked \{ color: white \}

伪状态的取反也可以出现在伪状态链中，举个例子，下面的规则在鼠标悬浮到一个没有被

press 的 QPushButton 上时生效：

QPushButton:hover:!pressed \{ color: blue; \}

如果有需要，可以使用逗号来表示逻辑或, 即并集选择器

QCheckBox:hover, QCheckBox:checked \{ color: white \}

伪状态可以与 subcontrol 组合使用，举个例子：

QComboBox::drop-down:hover \{ *image*: url(dropdown\_bright.png) \}

**样式的规则5**：控件中的子控件的样式设置。

对于一个复杂的控件，很有必要去控制这个控件的子控件。比如QComboBox的下拉按钮和QSpinBox的上下调整大小的箭头按钮。选择器可以包含子控件，这些子控件可以将规则的应用程序限制为特定的小部件子控件。如：

QComboBox::drop-down \{ image: url(dropdown.png) \}。指定了下拉按钮的填充图片

**样式的规则6**：伪状态。选择器可能包含伪状态，这些伪状态表示根据小部件的状态限制规则的应用。伪状态出现在选择器的末尾，中间有一个冒号(:)。如：

QPushButton:hover \{ color: white \} 表示当鼠标悬停时颜色为白色

伪状态可以使用感叹号！操作符进行否定。如：

QRadioButton:!hover \{ color: red \} 表示当鼠标不是悬停时颜色为红色

还可以有多个伪状态一起使用：

QCheckBox:hover:checked \{ color: white \} 表示 当鼠标悬停 并且 该复选框被选中的时候颜色为白色

QCheckBox:hover, QCheckBox:checked \{ color: white \} 表示当鼠标悬停或着被选中的时候 颜色为白色

**样式的规则7**：优先顺序的确定。

为什么要有优先级？

当一个控件被多个选择器选中并且设置了相同的属性（值不同）时， 不能仅仅根据设置样

式语句出现的先后顺序进行层叠, 那么控件的样式如何确定，于是引出了选择器的优先级问

题。

一般通过下面两步进行选择器优先级的判定.

**第一步：** **设置方式所产生的优先级问题**

在 CSS 中， 有如下层叠优先级规则：

**内联样式** **>** **内部样式** **>** **外部样式** **>** **浏览器缺省**

而在 Qss 中, 这个规则表现为:

**给控件直接设置的样式** **>** **给** **QApplication** **设置的样式**

就是说， 调用控件的 setStylesheet 设置的样式的优先级永远高于给 QApplication 设置的样

式， 即使 QApplication 中的选择器优先级更高

**第二步：样式表本身的优先级问题**

当设置方式相同，且几个样式规则为同一个控件的同一个属性指定不同的值时,就产生了冲

突.此时, 如何层叠就由选择器的优先级来确定.

一般而言，选择器越特殊，它的优先级越高。也就是选择器指向的越准确，它的优先级就越

高。

**优先级判断的三种方式**

1. 间接选中

间接选中就是指继承, 也就是在 Qt5.7 及以上版本, 程序中给 QApplication 对象设置了

Qt::AA\_UseStyleSheetPropagationInWidgetStyles 属性时, 才会有间接选中.

如果是间接选中,那么最终的样式就是离目标最近的那个, 这里的近指的是两个控件的

父子关系. 例如一个 QPushButton 对象被布局在 QGroupBox 中, 而 QGroupBox 又被布局

**18** / **62**在 QWidget 中, 此时如果给 QGroupBox 和 QWidget 都设置了 color 属性的颜色, 那么无

论设置顺序如何, QPushButton 的前景色总是表现为 QGroupBox 设置的颜色, 因为

QGroupBox 显然是离 QPushButton 最近的那一个.

2. 相同选择器(直接选中)

如果都是直接选中, 并且都是同类型的选择器, 那么写在后面的样式会覆盖掉前面的样

式, 例如

pBtn1->setStyleSheet("QPushButton\{color: green;\}");

pBtn1->setStyleSheet("QPushButton\{color: blue;\}");

显而易见, pBtn1 的前景色是蓝色.

3. 不同选择器(直接选中)

如果都是直接选中, 并且不是相同类型的选择器, 那么就会按照选择器的优先级来层叠.

具体的优先级如下:

Id > 类 > 类型 > 通配符 > 继承 > 默认

**优先级权重**

为什么会有优先级权重？

当多个选择器混合在一起使用时, 我们可以通过计算权重来判断谁的优先级最高,从而确定

控件的样式.

注意点： 只有选择器是直接选中控件时才需要计算权重， 否则直接选择器高于一切间接选

中的选择器

优先级权重的计算方式:

1. 计算选择器中的 id 选择器数量\[=a\]

2. 计算选择器中类选择器的数量+属性选择器的数量\[=b\]

3. 计算选择器中类型选择器的数量\[=c\]

4. 忽略子控件选择器

串联这三个数字 a-b-c 就得到优先级权重, 数字越大优先级越高.

以上为语法部分。

多个控件

\#widget\_1,\#widget\_2,\#widget\_3,\#widget\_4,\#widget\_7,\#widget\_8,\#widget\_9,\#widget\_10,\#widget\_11,\#widget\_12

border: 1px solid \#DCDFE6;

border-left:none;

border-bottom:none;

min-height:54px;

max-height:54px;

转载于:https://www.cnblogs.com/that-boy-done/p/11458130.html

QT之样式表（样式表规则以及使用大全）

发表评论取消回复

还没有评论，来说两句吧...

相关阅读

相关 QT之样式表（样式表规则以及使用大全）

相关 Qt学习笔记之样式表

相关 Qt 样式设置之 QCheckBox 样式表

相关 QT样式表设置之 QComboBox下拉框样式

相关 CSS样式规则以及CSS样式表的引入

相关 javascript改样式_使用JavaScript向样式表添加规则

相关 Qt样式表总结

相关 QT样式表之径向渐变(qradialgradient)

相关 Qt样式表参考

相关 Qt样式表