基本語法

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; }

類選擇器

• 類選擇器只會匹配該類，不會匹配該類的派生類

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

ID選擇器

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

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

后代選擇器

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

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

子元素選擇器

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

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

屬性選擇器

• 屬性：
  （1）控件中的屬性以Q_PROPERTY宏所聲明，且屬性類型支持QVariant::toString()；
  （2）自定義動態屬性。
• [attribute=value]：屬性值為value的控件；
• [attribute|=value]：屬性值以value開頭的控件；
• [attribute~=value]: 屬性值中包含value的控件（value需以獨立的單詞存在，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"); //經測試，有效果 ui->pushButton1->setObjectName("luffy 123"); //經測試，沒效果（5.14.1版本）不知為啥？？？ ui->pushButton2->setObjectName("luffy123"); //經測試，沒效果（5.14.1版本） [objectName|='luffy'] {color: red; }// 3 [attribute~=value] {attribute1: value1;attribute2: value2;... : ...; } eg: ui->pushButton->setObjectName("luffy"); //經測試，有效果 ui->pushButton1->setObjectName("123 luffy"); //經測試，有效果 ui->pushButton2->setObjectName("luffy123"); //經測試，沒效果，格式錯誤 [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(...); }

偽類選擇器

• 控件的指定狀態，如：按鍵的鼠標懸浮狀態、按下狀態等等
• 狀態可以用!取反，也可以合并使用

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

匹配規則

• 多個選擇器組合使用時，他們的結合方向是自右向左的。

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

特性

層疊性

• 多個選擇器匹配到同一個控件，后面的選擇器會覆蓋前面的選擇器

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

繼承性

• 子控件不會從父控件繼承字體和顏色的設置

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

優先級

• 給控件直接設置的樣式 優先于 給QApplication設置的樣式
• 選擇器指向越準確，優先級越高
• id選擇器 > 類選擇器 > 類型選擇器 > 通用選擇器 > 默認

加載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(); }

學習資料

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

總結

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

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