一、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使用与基本语法的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。