一、QSS介绍

QSS是一种从CSS借鉴过来的机制，用来实现对控件外观的自定义。但是它比CSS功能要弱化一些，有一些属性和选择器，QSS并没有。
Qt中的各个控件可以使用QSS来实现界面的个性化定制、美化，使用起来也是特别方便的。

二、QSS使用与语法

我们接下来以一个简单地例子来，说明怎么使用qss修改界面外观。

1、举个栗子

设置QLineEdit控件背景色为黄色。

qApp->setStyleSheet("QLineEdit { background-color: yellow; }");

效果：

其中QLineEdit表示选择器，background-color表示属性，yellow表示值。

每个qss样式都有下面的形式：

selector { attribute: value }

2、选择器

(1)通用选择器

“*”，匹配所有控件（QWidget）：

qApp->setStyleSheet("* { background-color: yellow; }");

主窗口与QLineEdit背景色均为黄色。

(2)类型选择器

"类名"作为选择器，作用于本类及其子类：

QLineEdit* lineEdit = new QLineEdit(ui->centralWidget);
MyLineEdit* myLineEdit = new MyLineEdit(ui->centralWidget);
qApp->setStyleSheet("QLineEdit { background-color: yellow; }");

QLineEdit与子类MyLineEdit颜色均为黄色。

(3)类选择器

".+类名"作为选择器,仅作用于本类

qApp->setStyleSheet(".QWidget { background-color: yellow; }");

QWidget类型centralWidget为黄色，QLineEdit不变。

疑问：像上面这样指定QWidget，QLineEdit不会受影响；但是自己从QLineEdit上派生出MyLineEdit类，此时使用

qApp->setStyleSheet(".QLineEdit { background-color: yellow; }");

结果MyLineEdit与QLineEdit均变为黄色，应该是哪里没对？？

“. + class的属性值” 作为选择器

先定义qss样式，然后setProperty()设置"class"属性值为"xxx"。

qApp->setStyleSheet(".test { background-color: yellow; }");
lineEdit->setProperty("class",  "test");

(4)ID选择器

“# + objectName” 作为选择器，只作用于此objectName对象；#前面可加类名，也可省略。

lineEdit1->setObjectName(QString::fromUtf8("lineEdit1"));
lineEdit2->setObjectName(QString::fromUtf8("lineEdit2"));
qApp->setStyleSheet("#lineEdit1 { background-color: yellow; }""#lineEdit2 { background-color: red; }");

或

lineEdit1->setObjectName(QString::fromUtf8("lineEdit1"));
lineEdit2->setObjectName(QString::fromUtf8("lineEdit2"));
qApp->setStyleSheet("QLineEdit#lineEdit1 { background-color: yellow; }""QLineEdit#lineEdit2 { background-color: red; }");

多个控件样式一样，也可以连用，以","分割：

qApp->setStyleSheet("#lineEdit1, #lineEdit2 { background-color: green; }");

或

qApp->setStyleSheet("QLineEdit#lineEdit1, QLineEdit#lineEdit2 { background-color: green; }");

(5)属性选择器

"类名[属性=‘值’]"作为选择器，值一定是字符串。

qApp->setStyleSheet("QLineEdit[bkColor='red'] { background-color: red; }""QLineEdit[bkColor='green'] { background-color: green; }");
lineEdit1->setProperty("bkColor", "red"); // 显示红色样式
lineEdit2->setProperty("bkColor", "green"); // 显示绿色样式

(6)包含选择器

"父控件类型子控件类型"作为选择器，选择器之间用空格隔开；作用于父控件下所有指定类型直接和间接子控件。

QLineEdit* lineEdit1 = new QLineEdit(ui->centralWidget);
QWidget* widget = new QWidget(ui->centralWidget);
QLineEdit* lineEdit2 = new QLineEdit(widget);
ui->centralWidget->setStyleSheet("QWidget QLineEdit { background-color: red; }");

lineEdit1为ui->centralWidget的子控件，lineEdit2是ui->centralWidget的孙子控件，故两者都为红色。

(7)子元素选择器

"父控件 > 子控件"作为选择器，作用于父控件下所有指定类型直接子控件。与包含选择器的区别是否作用于间接子控件。

QLineEdit* lineEdit1 = new QLineEdit(ui->centralWidget);
QLineEdit* lineEdit2 = new QLineEdit(this);
this->setStyleSheet("QMainWindow > QLineEdit { background-color: red; }");

lineEdit1位于QMainWindow->centralWidget下，lineEdit2 位于QMainWindow下，故QMainWindow直接子控件lineEdit2变为红色，间接子控件lineEdit1无变化。

(8)伪类选择器

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

QPushButton* btn = new QPushButton("test1", ui->centralWidget);
btn->setStyleSheet("QPushButton:pressed { color: red; }""QPushButton:!pressed { color: green; }");

伪类选择器还支持链式规则：

“选择器:状态1:状态2:状态3”

状态之间使用逻辑与，同时满足条件样式才生效

btn->setStyleSheet("QPushButton:hover:pressed { color: yellow; }");

(9)Subcontrol选择器

"类名::部件名"作为选择器，类由多个部件组成，通过它可以设置部件的外观。

QCheckBox* check = new QCheckBox("test", ui->centralWidget);
check->setStyleSheet("QCheckBox::indicator:checked { image: url(:/res/check.png); }""QCheckBox::indicator:unchecked { image: url(:/res/uncheck.png); }");

3、属性

QSS基本属性参考链接：《使用Qss设置QT程序界面的样式和皮肤》

4、加载qss的方式

一般一个窗口对应定义一个qss文件，将该窗口中的所有控件qss放在其中，并将qss文件添加到资源文件中。

test.qss：

QMainWindow { border-image: url(:/res/car.jpg);
}

加载qss文件

void MainWindow::loadQssFile()
{QFile file(":/res/test.qss");if(file.open(QIODevice::ReadOnly | QIODevice::Text)){qApp->setStyleSheet(file.readAll());file.close();}
}

Qt更多控件QSS使用例子，参考Qt帮助文档中：Qt Style Sheets Examples

若对你有帮助，欢迎点赞、收藏、评论，你的支持就是我的最大动力！！！

同时，阿超为大家准备了丰富的学习资料，欢迎关注公众号“超哥学编程”，即可领取。

本文涉及工程代码，公众号回复：36QSS，即可下载。

Qt之QSS使用与基本语法相关推荐

详解 QT 皮肤 QSS编程
本文纯粹拷自51CTO,只为复习阅读方便... QT 皮肤 QSS编程是本文要介绍的内容,借用css 的灵感,Qt也支持Qt自己的css,简称qss.同css 相似,qss的主要功能与最终目的都是能使 ...
Qt扫盲-QSS语法概述
QSS语法概述一.语法规则二.选择器类型三.子控件四.伪态五.冲突解决六.样式层叠七.样式继承八.含命名空间样式设置九.QObject 属性设置概述: QSS也叫Qt样式表,Qt样 ...
QT中QSS的语法设置【颜色渐变处理】
1.渐变颜色设置有:qlineargradient(线性渐变颜色设置),qradialgradient(辐射渐变),qconicalgradient(圆锥形渐变). 1 QLinearGradient ...
Qt扫盲-QSS概述
QSS概述一.概述二.详细一.概述 QSS 其实是Qt样式表,Qt样式表是Qt界面的一种强大的机制,除了通过继承QStyle已经可以实现的功能外,它还允许您自定义窗口组件的外观.Qt样式表的概念 ...
Qt6教程之三(2) QT使用qss
QSS是Qt Style Sheets的缩写,中文含义是Qt样式表,它用来自定义控件外观的机制.QSS与网页中使用的CSS非常相似,可以把QSS看作是CSS在Qt领域领域的定制版本. QSS的语法规则 ...
QT 的 QSS 的基本概念
https://www.cnblogs.com/davesla/archive/2011/01/30/1947928.html 借用css 的灵感, Qt也支持Qt自己的css, 简称qss.同css ...
Qt使用qss文件管理stylesheet
内容总结简介: 1)使用.qss后缀的文件来管理Qt中每个类的具体组件的stylesheet设置. 2)在类中使用具体.qss文件中的设置. 3)解决控件中多个相同组件不同设置或者同一个控制不同子控制 ...
Qt中QSS的简单使用
样式表的组成样式表由两大元素组成:选择器和声明.选择器实际上可以理解为对象,声明则是对该对象的属性的设置. 样式表的使用方法一:在代码中调用setStyleSheet()来设置样式: 方法二:通过 ...
Qt 之 QSS（黑色炫酷）
简述 Qt助手中有关于各种部件的QSS详细讲解,资源很丰富,请参考:Qt Style Sheets Examples. 黑色炫酷 - 一款漂亮的QSS风格. 之前博客中分享了很多关于Qt的样式效果,几 ...
Qt 之 QSS（白色靓丽）
简述 Qt助手中有关于各种部件的QSS详细讲解,资源很丰富,请参考:Qt Style Sheets Examples. 白色靓丽 - 一款漂亮的QSS风格. 你可以直接使用,也可以随意转载,但请务必保 ...

Qt之QSS使用与基本语法