基本語法

selector { attribute1: value1;attribute2: value2;... : ...; }

• selector: 選擇器，即QT中的控件，如：QPushButton等
• attribute1: value1: 屬性鍵值對，如：color: red;

選擇器

通用選擇器

• 通用選擇器：*
• 匹配程序上的所有widget

* {attribute1: value1;attribute2: value2;... : ...; }eg: * {color: #ff0000;border: none; }

類型選擇器

• 類型選擇器匹配所有該類以及該類的派生類對象

類名 { attribute1: value1;attribute2: value2;... : ...; }eg: // 包括QWidget以及QWidget的所有派生類，如：QPushButton等 QWidget { color: #ff0000; }

類選擇器

• 類選擇器只會(huì)匹配該類，不會(huì)匹配該類的派生類

.類名 {attribute1: value1;attribute2: value2;... : ...; }eg: // 已QFrame為容器，只會(huì)匹配QFrame，不會(huì)匹配容器中的派生類 .QFrame {border-color: #ff0000; }

ID選擇器

• 匹配具體ID的控件
• ID為控件的objectName

#id {attribute1: value1;attribute2: value2;... : ...; } // 建議加上類名，看上去會(huì)很直觀，就知道是什么類型的控件 類名#id {attribute1: value1;attribute2: value2;... : ...; }eg: // 一個(gè)QPushButton的objectName為btnOpen #btnOpen {color: red; } QPushButton#btnOpen {color: red; }

后代選擇器

• 后代是指控件被包含于某個(gè)控件中，如：QFrame中包含QPushButton，則QPushButton為QFrame的后代
• 匹配最后一個(gè)后代選擇器的控件
• 后代選擇器可以是上面所寫的任意類型選擇器
• 后代選擇器可以一直延續(xù)，兩個(gè)，三個(gè)，四個(gè) …

selector1 selector2 ... {attribute1: value1;attribute2: value2;... : ...; }eg: // QFrame中包含QPushButton，匹配QFrame中的所有QPushButton QFrame QPushButton {color: rgb(255, 0, 0); } // 多重延續(xù) QWidget QFrame QGroupBox QPushButton {color: rgb(255, 0, 0); }

子元素選擇器

• 子元素是指一個(gè)控件被包含于另一控件中
• 子元素選擇器只能延續(xù)一重，不能像后代選擇器一直延續(xù)

selector1>selector2 {attribute1: value1;attribute2: value2;... : ...; }// QFrame中包含QPushButton，匹配QFrame中的所有QPushButton QFrame>QPushButton {color: rgb(255, 0, 0); }

屬性選擇器

• 屬性：
  （1）控件中的屬性以Q_PROPERTY宏所聲明，且屬性類型支持QVariant::toString()；
  （2）自定義動(dòng)態(tài)屬性。
• [attribute=value]：屬性值為value的控件；
• [attribute|=value]：屬性值以value開頭的控件；
• [attribute~=value]: 屬性值中包含value的控件（value需以獨(dú)立的單詞存在，eg：button open）。

// 1 [attribute=value] {attribute1: value1;attribute2: value2;... : ...; } eg: ui->pushButton->setObjectName("luffy"); [objectName='luffy'] {color: red; }// 2 [attribute|=value] {attribute1: value1;attribute2: value2;... : ...; } eg: ui->pushButton->setObjectName("luffy"); //經(jīng)測試，有效果 ui->pushButton1->setObjectName("luffy 123"); //經(jīng)測試，沒效果（5.14.1版本）不知為啥？？？ ui->pushButton2->setObjectName("luffy123"); //經(jīng)測試，沒效果（5.14.1版本） [objectName|='luffy'] {color: red; }// 3 [attribute~=value] {attribute1: value1;attribute2: value2;... : ...; } eg: ui->pushButton->setObjectName("luffy"); //經(jīng)測試，有效果 ui->pushButton1->setObjectName("123 luffy"); //經(jīng)測試，有效果 ui->pushButton2->setObjectName("luffy123"); //經(jīng)測試，沒效果，格式錯(cuò)誤 [objectName~='luffy'] {color: red; }

并集選擇器

• 多種類型的控件一起匹配

selector1, selector2, ... {attribute1: value1;attribute2: value2;... : ...; }eg: // 匹配QPushButton與QLineEdit QPushButton, QLineEdit {color: red; }

子控件選擇器

• 控件中包含的子控件，如：QComboBox的下拉箭頭等

類型選擇器::子控件 {attribute1: value1;attribute2: value2;... : ...; }類選擇器::子控件 {attribute1: value1;attribute2: value2;... : ...; }eg: QComboBox::down-arrow {image: url(...); }

偽類選擇器

• 控件的指定狀態(tài)，如：按鍵的鼠標(biāo)懸浮狀態(tài)、按下狀態(tài)等等
• 狀態(tài)可以用!取反，也可以合并使用

類型選擇器:狀態(tài) {attribute1: value1;attribute2: value2;... : ...; }類選擇器:狀態(tài) {attribute1: value1;attribute2: value2;... : ...; }eg: // 按鍵的鼠標(biāo)懸浮狀態(tài) QPushButton:hover {color: red; } // 按鍵的鼠標(biāo)非懸浮狀態(tài)（對狀態(tài)取反操作） QPushButton:!hover {color: blue; } // 按鍵的鼠標(biāo)懸浮非按下狀態(tài)（狀態(tài)合并使用） QPushButton:hover:!pressed {color: #777777; }

匹配規(guī)則

• 多個(gè)選擇器組合使用時(shí)，他們的結(jié)合方向是自右向左的。

// 給QFrame中的QPushButton和QLineEdit設(shè)置樣式 // 錯(cuò)誤寫法 QFrame QPushButton, QLineEdit {color: red; } // 正確寫法 QFrame QPushButton, QFrame QLineEdit {color: red; }

特性

層疊性

• 多個(gè)選擇器匹配到同一個(gè)控件，后面的選擇器會(huì)覆蓋前面的選擇器

// 第一個(gè)會(huì)被第二個(gè)覆蓋 ui->btnOpen->setStyleSheet(QString("QPushButton{color: red;}"); ui->btnOpen->setStyleSheet(QString(".PushButton{color: green;}");

繼承性

• 子控件不會(huì)從父控件繼承字體和顏色的設(shè)置

// QFrame中包含QPushButton // 1 QPushButton不會(huì)受到影響 QFrame {color: red; } // 2 QPushButton也設(shè)置相同樣式 QFrame, QFrame * {color: red; }

優(yōu)先級

• 給控件直接設(shè)置的樣式 優(yōu)先于 給QApplication設(shè)置的樣式
• 選擇器指向越準(zhǔn)確，優(yōu)先級越高
• id選擇器 > 類選擇器 > 類型選擇器 > 通用選擇器 > 默認(rèn)

加載QSS文件方法

// 方法一 qApp->setStyleSheet("file:///:qss/defaultStyle.qss"); qApp->setStyleSheet(QString("file:///%1").arg(qssFileName));// 方法二 QString qss; QFile qssFile(":/qss/luffy.qss"); //樣式表文件 qssFile.open(QFile::ReadOnly); if (qssFile.isOpen()) { qss = QLatin1String(qssFile.readAll()); qApp->setStyleSheet(qss); qssFile.close(); }

學(xué)習(xí)資料

《QT樣式表葵花寶典.pdf》

總結(jié)

以上是生活随笔為你收集整理的【入门】QSS基础入门笔记的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。