一、選擇器類型

Qt QSS選擇器和CSS2、CSS3的選擇器類似，建議先學習或者復習一下CSS選擇器的語法。QSS雖然和CSS類型，但有也稍許不同，而且支持的語法也沒那么多，具體講解如下。

1.1 類選擇器

/* 匹配QPushButton的實例及其子類 */ QPushButton {color: blue; }/* 匹配QPushButton的實例，但不包含子類 */ .QPushButton {color: blue; }

1.2 選擇器分組

/*同時匹配QPushButton、QLineEdit的實例 */ QPushButton, QLineEdit {color:blue;}

1.3 ID選擇器

/* 匹配所有objectName為btnOK的實例 */ *#btnOK {font-weight:bold;}/* 和*#btnOK一樣，匹配所有objectName為btnOK的實例 */ #btnOK {font-weight:bold;}/* 匹配所有objectName為btnOK的QPushButton實例 */ QPushButton#btnOK {font-weight:bold;}

1.4 屬性選擇器

/* 匹配包含flat屬性的所有實例 */ *[flat] {color:red;}/* 匹配包含flat屬性的所有QPushButton的實例 */ QPushButton[flat] {color:red;}/* 匹配flat屬性為true的所有QPushButton的實例 */ QPushButton[flat="true"] {color:red;}/* 匹配falt屬性為true且default屬性為false的所有QPushButton的實例 */ QPushButton[flat="true"][default="false"] {color:red;}

1.5 后代選擇器

/* 匹配屬于QDialog后代（孩子，孫子等）的QPushButton所有實例 */ QDialog QPushButton {color:red;}

1.6 子元素選擇器

/* 匹配屬于QDialog直接子類的QPushButton所有實例 */ QDialog > QPushButton {color:red;}

1.7 偽狀態

/* 匹配hover狀態的所有QPushButton的實例 */ QPushButton:hover { color: white }/* 匹配同時為hover和enabled狀態的所有QPushButton的實例 */ QPushButton:hover:enabled { color: white }/* 匹配不為hover狀態的所有QPushButton的實例 */ QRadioButton:!hover { color: red }

1.8 子控件選擇器

QRadioButton::indicator::unchecked:disabled {image: url(:/qss/radiobutton_unchecked_disable.png); }

二、選擇器優先級

一句話歸納為：優先使用更具體的選擇器。

具體實例如下：

/* QPushButton#okButton選擇器比QPushButton更具體，所以選擇QPushButton#okButton */ QPushButton#okButton { color: gray } QPushButton { color: red } /* 如下2個規則應用于QPushButton實例時： 因為QPushButton繼承QAbstractButton，所以QPushButton比QAbstractButton更具體，選擇QPushButton */ QPushButton { color: red } QAbstractButton { color: gray } /* 指定偽狀態比不指定偽狀態的選擇器更具體，所以當鼠標懸停時選擇QPushButton:hover，否則選擇QPushButton */ QPushButton:hover { color: white } QPushButton { color: red } /* 如下2個規則應用于處于Enabled狀態的QPushButton實例時： 鼠標懸停時，QPushButton:hover更能具體描述當前狀態，所以選擇QPushButton:hover 其他時候選擇QPushButton:enabled */ QPushButton:enabled { color: red} QPushButton:hover { color: white} /* 如下2個規則應用于處于Enabled狀態的QPushButton實例時： 鼠標懸停時，QPushButton:enabled:hover更能具體描述當前狀態，所以選擇QPushButton:enabled:hover 其他時候選擇QPushButton:enabled */ QPushButton:enabled { color: red} QPushButton:hover { color: white} QPushButton:enabled:hover { color: white}

三、QSS支持的類型、屬性、偽狀態、子控件

關于QSS支持哪些類型、每種類型支持哪些屬性、偽狀態和子控件，在Qt的官方的英文文檔中有詳細的介紹，這里就不贅訴了。
《Qt Style Sheets Reference》

四、盒子模型

在使用QSS設置樣式時，有一個關鍵的概念需要知曉，那就是“盒子模型”（即Box Model）。

每個Widget都被視為具有4個同心矩形的框：
MARGIN矩形、BORDER矩形、PADDING矩形和CONTENT矩形，上圖標注了每個矩形的區域。

默認情況下MARGIN矩形、BORDER矩形、PADDING矩形的寬度都為0，這樣在默認情況下，4個矩形就重合為1個CONTENT矩形了。

同樣，默認情況下background-image指定的背景，只在border內的區域繪制。但我們要也可以使用background-clip或background-origin屬性來更改這種默認行為。

如何實現背景圖像隨Widget大小自動縮放？
background-image指定的背景圖像無法隨Widget大小自動縮放，要提供可以隨Widget大小縮放的背景圖像可以使用border-image和image屬性，二者區別如下：

• border-image屬性指定的圖像從border及其內的區域開始繪制，會導致border屬性被覆蓋。
• image屬性指定的圖像從繪制到content區域內，image指定的url為SVG圖像，則支持自動縮放，非SVG圖像僅支持自動縮小。

總結

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

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