目錄

• 1. 基本語法
• • 1.1 樣式規則
  • 1.2 選擇器、聲明
  • 1.3 大小寫
  • 1.4 多個選擇器
• 2. 選擇器
• • 2.1 通用選擇器：*
  • 2.2 類型選擇器：QPushButton
  • 2.3 屬性選擇器：QPushButton[flat="false"]
  • 2.4 類選擇器：.QPushButton
  • 2.5 ID 選擇器：QPushButton#okButton
  • 2.6 后代選擇器：QDialog QPushButton
  • 2.7 直接子代選擇器：QDialog > QPushButton
• 3. 子控件
• • 3.1 一個簡單示例
  • 3.2 子控件參考矩形
  • 3.3 子控件對齊方式
  • 3.4 子控件大小
  • 3.5 子控件相對位置、絕對位置
• 4. 偽狀態
• 5. 解決沖突
• • 5.1 產生沖突的原因
  • 5.2 解決沖突方法1：更具體的選擇器
  • 5.3 解決沖突方法2：相同優先級的選擇器，位于下方的優先級高
  • 5.4 優先級計算
• 6. 級聯（Cascading）
• 7. 繼承
• • 7.1 CSS 中的繼承
  • 7.2 QSS 中的繼承
• 8. 命名空間中的 widget
• 9. 設置 QObject 屬性

---

1. 基本語法

1.1 樣式規則

QSS 由樣式規則組成。以下是 3 條規則：

1.2 選擇器、聲明

樣式規則 = 選擇器+聲明：

1.3 大小寫

QSS 不區分大小寫，但類名、對象名、屬性名例外！假設有一個名為 objectName 的 QPushButton：

1.4 多個選擇器

可以將多個選擇器設置同一個聲明，使用逗號,分割：

QPushButton, QLineEdit, QComboBox { color: red; }

等價于：

QPushButton { color: red; } QLineEdit { color: red; } QComboBox { color: red; }

---

2. 選擇器

QSS 支持 CSS2 中定義的所有選擇器。

2.1 通用選擇器：*

匹配所有 widget。

2.2 類型選擇器：QPushButton

匹配 QPushButton 及其子類。

2.3 屬性選擇器：QPushButton[flat=“false”]

匹配所有設置了 setFlat(false) 的 QPushButton。

使用該選擇器既可以：1. 測試任何支持 QVariant::toString() 的 Qt 屬性，還支持特殊的類屬性，如類名；2. 還可以測試動態屬性。

除了=，也可以使用~=來測試 QStringList 類型的 Qt 屬性是否包含給定 QString。

注意：設置 qss 后，如果 Qt 屬性值發生了變化，則需要強制重新計算 qss。方法是：重新設置 qss。

2.4 類選擇器：.QPushButton

匹配 QPushButton，但不包括子類。等價于 *[class~="QPushButton"]。

2.5 ID 選擇器：QPushButton#okButton

匹配所有對象名為“okButton”的 QPushButton。

2.6 后代選擇器：QDialog QPushButton

匹配作為 QDialog 的后代（直接子代、孫代）的 QPushButton。

2.7 直接子代選擇器：QDialog > QPushButton

匹配作為 QDialog 的直接子級（即第一代）的 QPushButton。

---

3. 子控件

有些 widget 比較復雜，如 QComboBox 有下拉按鈕、QSpinBox 有上下箭頭，設置這些 widget 時可以指定子控件。

3.1 一個簡單示例

例如：

QComboBox::drop-down { image: url(dropdown.png) }

3.2 子控件參考矩形

子控件始終相對于另一個元素定位。例如，QComboBox 的 ::drop-down 默認放置在 QComboBox 的 Padding 矩形的右上角。

使用 subcontrol-origin 更改參考矩形。例如，想將下拉菜單放置在 QComboBox 的 “margin 矩形” 中而不是 “padding 矩形” 中，可以這樣設置：

QComboBox {margin-right: 20px; } QComboBox::drop-down {subcontrol-origin: margin; }

3.3 子控件對齊方式

使用 subcontrol-position 更改 Margin 矩形中下拉菜單的對齊方式。

3.4 子控件大小

使用 width 和 height 可以設置子控件的大小。

注意：如果設置了 image 會默認設置子控件的大小。

3.5 子控件相對位置、絕對位置

使用 position: relative 設置相對定位，允許子控件偏離初始位置。
使用 position: absolute 設置絕對定位，允許子控件相對于參考元素更改位置。

一旦使用了 position，子控件就被視為與 widget 相同，就可以使用盒模型設置。

注意：對于 QComboBox、QScrollBar 等復雜 widget，如果設置了某個屬性、某個子控件，那么其他的屬性、子控件也要設置。

---

4. 偽狀態

偽狀態是指 widget 的不同狀態。

偽狀態位于選擇器的末尾，中間有一個冒號 :。例如，鼠標懸浮按鈕時：

QPushButton:hover { color: white }

使用感嘆號 ! 否定偽狀態。例如，鼠標未懸浮按鈕時：

QPushButton:!hover { color: red }

偽狀態可以鏈接，此時默認隱含邏輯與。例如，鼠標懸停在選中的 QCheckBox 上時：

QCheckBox:hover:checked { color: white }

可以使用逗號 , 表示邏輯 OR：

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

偽狀態可以與子控件一起出現。 例如：

QComboBox::drop-down:hover { image: url(dropdown_bright.png) }

5. 解決沖突

5.1 產生沖突的原因

如果匹配到同一個 widget 的同一個屬性但卻設置了不同值，就會產生沖突。例如：

QPushButton#okButton { color: gray } QPushButton { color: red }

兩個規則都能匹配名為 okButton 的 QPushButton，但是設置了不同的文本色，這時就需要考慮 選擇器的優先級。

5.2 解決沖突方法1：更具體的選擇器

例如：

• QPushButton#okButton 比 QPushButton 優先級更高，因為它（通常）指的是單個對象，而不是類的所有實例。
• 具有偽狀態的選擇器比不指定偽狀態的選擇器優先級更高。例如：

QPushButton:hover { color: white } QPushButton { color: red }

當鼠標懸停在 QPushButton 上時文本為白色，否則為紅色。

這是一個棘手的問題：

5.3 解決沖突方法2：相同優先級的選擇器，位于下方的優先級高

一個示例，兩個選擇器優先級相同，但由于 enable 位于 hover 下方，因此優先級更高：

QPushButton:hover { color: white } QPushButton:enabled { color: red }

另一個示例：

QPushButton { color: red } QAbstractButton { color: gray }

雖然 QPushButton 是 QAbstractButton 的子類，似乎更具體，但對于樣式表計算，所有類型選擇器都具有相同的特性，并且最后出現的規則優先。因此，所有按鈕顏色都設置為灰色，包括 QPushButtons。

5.4 優先級計算

Qt Style Sheet 遵循 CSS2 規范：

優先級計算規則:

計算選擇器中 ID 屬性的數量 a；

計算選擇器中其他屬性和偽類的數量 b；

計算選擇器中元素名的數量 c；

忽略偽元素，如子控件；

最后，連接 a-b-c 得到優先級。

* {} /* a=0 b=0 c=0 -> specificity = 0 */ LI {} /* a=0 b=0 c=1 -> specificity = 1 */ UL LI {} /* a=0 b=0 c=2 -> specificity = 2 */ UL OL+LI {} /* a=0 b=0 c=3 -> specificity = 3 */ H1 + *[REL=up]{} /* a=0 b=1 c=1 -> specificity = 11 */ UL OL LI.red {} /* a=0 b=1 c=3 -> specificity = 13 */ LI.red.level {} /* a=0 b=2 c=1 -> specificity = 21 */ #x34y {} /* a=1 b=0 c=0 -> specificity = 100 */

6. 級聯（Cascading）

widget 的 qss 繼承 父widget。如果 widget 設置了自己的 qss，則優先級高于繼承的 qss。

例如：

qApp->setStyleSheet("QPushButton { color: white }"); myPushButton->setStyleSheet("* { color: blue }");

最終按鈕的文本色為藍色。

級聯是一個很復雜的話題，請參閱 CSS2 Specification。
注意：Qt 沒有實現 !imporant。

7. 繼承

7.1 CSS 中的繼承

在經典 CSS 中，字體和顏色會自動從父項繼承。

7.2 QSS 中的繼承

注意：Qt Style Sheet 中的 widget 不會自動從其父部件繼承字體和顏色

例如，QGroupBox 中有個 QPushButton。QPushButton 不會自動繼承 QGroupBox 的顏色，而是使用系統顏色：

qApp->setStyleSheet("QGroupBox { color: red; } ");

如果想為 QGroupBox 及其子對象設置顏色，可以這樣寫：

qApp->setStyleSheet("QGroupBox, QGroupBox * { color: red; }");

使用 QWidget::setFont() 和 QWidget::setPalette() 設置字體和調色板會傳播到子部件。

如果您希望字體和調色板傳播到子小部件，可以設置 Qt::AA_UseStyleSheetPropagationInWidgetStyles 標志，如下所示：

QCoreApplication::setAttribute(Qt::AA_UseStyleSheetPropagationInWidgetStyles, true);

當啟用該功能時，通過 QSS 設置的字體和調色板變化時，其行為類似于調用 QWidget::setPalette() 和 QWidget::setFont()。如果所調函數能在 C++ 中傳播，則也就可以在 qss 中傳播。

8. 命名空間中的 widget

類型選擇器可用于為特定類型的 widget 設置樣式。例如：

class MyPushButton : public QPushButton {// ... } qApp->setStyleSheet("MyPushButton { background: yellow; }");

Qt Style Sheet 使用 widget 的 QObject::className() 來確定何時應用類型選擇器。當自定義部件在命名空間內時，QObject::className() 返回 ::，這與子控件的語法沖突。為了克服這個問題，在命名空間內使用類型選擇器時，我們必須將“::”替換為“--”。 例如：

namespace ns {class MyPushButton : public QPushButton {// ...} } qApp->setStyleSheet("ns--MyPushButton { background: yellow; }");

9. 設置 QObject 屬性

從 Qt 4.3 開始，可以使用 qproperty-<property name> 語法設置 Q_PROPERTY，例如：

MyLabel { qproperty-pixmap: url(pixmap.png); } MyGroupBox { qproperty-titleColor: rgb(100, 200, 100); } QPushButton { qproperty-iconSize: 20px 20px; }

如果該屬性引用了一個用 Q_ENUMS 聲明的枚舉，您應該按名稱引用它的常量，即，而不是它們的數值。

注意：請謹用 qproperty 語法，因為它會修改正在繪制的小部件。此外，qproperty 語法只評估一次，即當小部件被樣式修飾時。這意味著在 QPushButton:hover 等偽狀態下使用它們的任何嘗試都將不起作用。

總結

以上是生活随笔為你收集整理的QSS 语法的全部內容，希望文章能夠幫你解決所遇到的問題。

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