1、何為Qt樣式表

Qt樣式表的思想很大程度上是來自于HTML的層疊式樣式表(CSS)， 通過調用QWidget::setStyleSheet()或QApplication::setStyleSheet()， 你可以為一個獨立的子部件、整個窗口，甚至是整個個應用程序指定一個樣式表。

樣式表是通過QStyle的一個叫做QStyleSheetStyle的特殊子類來實現的。 這個特殊的子類實際上是其他的系統特定風格類的包裹類， 它會把通過樣式表指定的自定義外觀風格應用在底層的系統特定風格之上。
Qt的help文檔中有例子來幫助學習樣式表，喜歡參見英文示例的可參看Qt文檔，在幫助文檔中搜索“stylesheet”，可找到比較全的幫助文檔，注意，搜索一定要全小寫。

2、樣式表語法基礎

Qt樣式表與CSS的語法規則幾乎完全相同，如果你已經了解了CSS，完全可以跳過本節。

qss由一個selector與一個declaration組成，selector指定了是對哪一個控件產生效果，而declaration才是真正的產生作用的語句。如：QPushButton { color: red }。QPushButton指定了是對所有的QPushButton或是其子類控件（如用戶定義的MyPushButton）產生影響，而color:red表明所有的受影響控件的前景色都為red。

除了“類名”，“對象名”，“Qt屬性名”這三樣東西是大小寫敏感的外其他的東西都是大小寫不敏感的，如color與Color代表同一屬性。
如果有幾個selector指定了相同的declaration,可以使用逗號（,）將各個選擇器分開，如：

QPushButton, QLineEdit, QComboBox{ color: red }
他相當于：

QPushButton { color: red }

QLineEdit { color: red }

QComboBox { color: red }

declaration部份是一系列的（屬性：值）對，使用分號（;）將各個不同的屬性值對分開，使用大括號（{}）將所有declaration包含在一起。

2.1一般選擇器

Qt支持所有的CSS2定義的選擇器， 其中比較常用的selector類型有：

a) 通用類型選擇器：* 會對所有控件有效果。

b) 類型選擇器：QPushButton匹配所有QPushButton的實例和其子類的實例。

c) 屬性選擇器：QPushButton[flat=”false”]匹配所有QPushButton屬性flat為false的實例，屬性分為兩種，靜態的和動態的，靜態屬性可以通過Q_PROPERTY() 來指定，動態屬性可以使用setProperty來指定，如：

QLineEdit *nameEdit = newQLineEdit(this);nameEdit->setProperty("mandatoryField",true);

如果在設置了qss后Qt屬性改變了，需要重新設置qss來使其生效，可以使用先unset再set qss。

ptb->style()->unpolish(ptb); ptb->style()->polish(ptb); ptb->update ();

d) 類選擇器：.QPushButton匹配所有QPushButton的實例，但不包含其子類，這相當于：*[class~=“QPushButton”] ~=的意思是測試一個QStringList類型的屬性是否包含給定的QString

e) ID選擇器：QPushButton#okButton對應Qt里面的objectname設置，使用這條QSS之前要先設置對應控件的objectname為okButton，如：Ok->setObjectName(tr(“okButton”));

f) 后裔選擇器：QDialog QPushButton匹配所有為QDialog后裔（包含兒子，與兒子的兒子的遞歸）的QPushButton的實例 ，如圖1所示。
QFrame的Qss語句為：

QFrame QPushButton{background-color: qlineargradient(spread:pad, x1:0,
y1:0, x2:1, y2:0, stop:0 rgba(255,200, 200, 255), stop:1 rgba(255,
255, 100, 255));}

左圖中QPushButton不是QFrame的直接后裔，但QFrame有關其QPushButton后裔的設定依然起作用

圖1后裔選擇器實例

g) 子選擇器：QDialog >QPushButton匹配所有的QDialog直接兒子的QPushButton的實例，不包含兒子的兒子的遞歸，如圖2所示。

QFrame的Qss語句為：

QFrame>QPushButton{background-color: qlineargradient(spread:pad, x1:0, y1:0, x2:1, y2:0, stop:0rgba(255, 200, 200, 255), stop:1 rgba(255, 255, 100, 255));}
左圖中QPushButton不是QFrame的直接后裔

圖2子選擇器示例

2.2子控件選擇器

對于復雜的控件，可能會在其中包含其他子控件，如一個QComboxBox中有一個drop-down的按鈕。那么現在如果要設置QComboxBox的下拉按鈕的話，就可以這樣訪問：

QComboBox::drop-down { image:url(dropdown.png) }其標志是(:😃

子控件選擇器是用位置的引用來代表一個元素，這個元素可以是一個單一控件或是另一個包含子控件的復合控件。使用subcontrol-origin屬性可以改變子控件的默認放置位置，如：

QComboBox {undefined

margin-right: 20px;

}

QComboBox::drop-down {undefined

subcontrol-origin: margin;

}

如上語句可以用來改變drop-down的margin。

相對位置屬性可以用來改變子控件相對于最初位置的偏移量，如當一個QCombox的drop-down按鈕被按下時，我們可以用一個內部的小偏移量來表示被按下的效果，如下：

QComboBox::down-arrow {undefined

image:url(down_arrow.png);

}

QComboBox::down-arrow:pressed {undefined

position:relative;top:1px; left: 1px;

}

絕對位置屬性允許子控件改變自己的位置和大小而不受引用元素的控件。一但位置被設定了，這些子控件就可以被當成一般的widget來對待，并且可以使用合模型。

有關相對位置和絕對位置的定義參見后面的論述。

如果要查看Qt支持哪些子控件選擇器，可以參考

點擊打開鏈接http://pepper.troll.no/s60prereleases/doc/stylesheet-reference.html#list-of-sub-controls-syntax.html

2.3偽選擇器

a)偽選擇器以冒號(:)表示(注意和上述子控件的區別，子控件(:😃)，與css里的偽選擇器相似，是基于控件的一些基本狀態來限定程序的規則，如hover表示鼠標經過控件時的狀態，而press表示按下按鈕時的狀態。如：

QPushButton:hover

{undefined

Background-color:red;

}

表示鼠標經過時QPushButton背景變紅。

Pseudo還支持否定符號(!)，如：

QRadioButton:!hover { color: red}

表示沒有鼠標移上QRadioButton時他顯示的顏色是red。

b)Pseudo可以被串連在一起，比如：

QPushButton:hover:!pressed {color: blue; }

表示QPushButton在鼠標移上卻沒有點擊時顯示blue字，但如果點擊的時候就不會顯示blue顏色了。 同樣可以和之前所講的子控件選擇器一起聯合使用，如：

QSpinBox::down-button:hover {image: url(btn-combobox-press.bmp) }

與前面所講的一樣，偽選擇器，子控件選擇器等都是可以用逗號(,)分隔表示連續相同的設置的，如：

QPushButton:hover,QSpinBox::down-button,QCheckBox:checked { color: white ;image: url(btn-combobox-press.bmp);}

更多請參考：
http://pepper.troll.no/s60prereleases/doc/stylesheet-reference.html#list-of-pseudo-states

2.4解決沖突

a) 使用object name

在程序里面要先設置控件的對象名稱，如：

btnOne = newQPushButton(centralWidget);

btnOne->setObjectName(QString::fromUtf8(“btnOneCh”));

這樣，我們有了一個objectname為btnOneCh的QPushButton，試驗一下，使用指定object name的方式，如：

QPushButton#btnOneCh { color: red} QPushButton { color: white }

可以看出，btnOncCh的color變成了red

b) 使用偽選擇器

偽選擇器主要有hover、press等，如“按扭1”是disable的，QPushButton:!enabled {color:white}；

c) 先后順序

所有的類型選擇器都有一個共同的特性，就是如果有兩個屬性沖突了的話就會以最后出現的一個為準,如：

QPushButton { color: red }

QAbstractButton { color: gray }

由于QPushButton為QAbstractButton的子類，如果只設置QAbstractButton的可以想像結果是所有的 QPushButton都為gray, 如果只設置QPushButton的所有QPushButton都會為red，當兩個都能設置起效的時候，以在文本上最后出現的為準，所以結果為Grey

d) 指定ID(#object name)

當然其中如果有#指定了object name，他所設置的優先級是最大的，

QPushButton#btnOneCh { color: red }QPushButton { color: blue }QAbstractButton { color: gray }

雖然QAbstractButton在最后，但是之前有#btnOneCh指定了QPushButton“一”的color為red所以最后顯示也是“一”為red。

e) 優先級計算方法

解決沖突的優先級計算方法如下，這里不再給出中文：

count the number of ID attributes in the selector (= a)
count the number of other attributes and pseudo-classes in the selector (= b)
count the number of element names in the selector (= c)
ignore pseudo-elements [i.e., subcontrols].
Concatenating thethree numbers a-b-c (in a number system with a large base) gives thespecificity.

Some examples:

{} /* 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 */

2.5級聯效應

a) 子類父類級聯

子類可以繼承父類的StyleSheet，但是如果子類里面設置了StyleSheet與父類里在設置的有沖突，那么當然會優先考慮子類自己的，同樣，如果在qApp里面面設置了，但是在某一個特定控件里面也設置，如果有沖突，也是優先控件自己的，例如，我在程序時面設置了：btnOneEn->setStyleSheet(“QPushButton{ color: red }”);而，當我再設置qApp時，如果，將QPushButton的color設置成grey的，那么結果是對于btnOneEn這個QPushButton來說他的顏色還是red。這就是為什么這里設置為grey了btnOneEn卻還是red的。

b) 子類通用級聯

如果我們對一個控件設置StyleSheet為：

QPushButton* myPushButton;

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

其實他和設置為：myPushButton->setStyleSheet(“color:blue”);效果相同，只是后一種設置不會對QPushButton的子類產生作用，但第一種卻會影響到其子類。

2.6包含繼承性

與CSS不同的一點，在CSS box模型中，如果一個元素在別一元素的里面，那么里面的元素會自動繼承外面元素的屬性，但QSS里面不會，如：一個QPushButton如果放在一個QGroupBox里面，其Qss語句如下：

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

并不代表在QGroupBox里面的QPushButton也會有color:red的屬性，如果要想有的話要顯示寫明，如：qApp->setStyleSheet(“QGroupBox,QGroupBox * { color: red; }”);

或者在應用程序里面也可以用QWidget::setFont等來設置到子控件的屬性。

注意，這里的繼承性要和“2.5”中的級聯效應區分開，例如圖3的例子：

圖3 級聯效應和繼承性

如上圖，其QFrame的樣式表代碼如下：

QFrame{undefinedborder-color:red;border-width:2;border-style:solid;background-color:qlineargradient(spread:pad, x1:0.477273, y1:0, x2:0.489, y2:1, stop:0 rgba(255,255, 255, 255), stop:0.494318 rgba(164, 255, 242, 255),stop:1 rgba(255, 255, 255, 255));}

而QFrame里面的QGroupBox和QLabel并沒有專用的style，從上圖中看出，其中QGroupBox的樣式為默認樣式，而QLabel的樣式和QFrame的樣式相同，其原因是在Qt中，QLabel是繼承于QFrame的，也就是說QLabel是QFrame的子類，所以QLabel的樣式和QFame保持一致，而若將QLabel置于QFame之外，QLabel的樣式一樣會和QFrame保持一致，因為二者是父類和子類的關系，不僅僅是圖中的包含關系;

而QGroupBox的樣式保持默認樣式，原因是QGroupBox不是QFrame的子類，并且Qss沒有自動繼承的屬性。

2.7Namespace沖突

類型選擇器能夠使用到一個特定的類型，如：

class MyPushButton : publicQPushButton

{undefined

// ...

}

qApp->setStyleSheet(“MyPushButton{ background: yellow; }”);

因為QSS使用QObject::className來判斷要賦與style sheet的控件類型，如果一個用戶定義控件類型在一個namespace里面的話，QObject::className會返回::的名字，這和子控件選擇器的語法相沖突，為了解決此問題，使用“–”來代替“::”，比如：

namespace ns

{undefined

classMyPushButton : public QPushButton{undefined// ...}

}

qApp->setSytleSheet(“ns–MyPushButton{ background: yellow; }”);

2.8設置對象屬性

如果在程序里面使用Q_PROPERT（有關Q_PROPERT的具體應用，參見附錄A）設置的屬性，可以在qss里面使用：qproperty-的形式來訪問并設置值。如：

MyLabel{ qproperty-pixmap: url(pixmap.png); }MyGroupBox{ qproperty-titleColor: rgb(100, 200, 100); }QPushButton{ qproperty-iconSize: 20px 20px; }如果屬性引用到的是一個由Q_ENUMS申明的enum時，要引用其屬性名字要用定義的名稱而不是數字。

————————————————
版權聲明：本文為CSDN博主「guoyanbo_81」的原創文章，遵循CC 4.0 BY-SA版權協議，轉載請附上原文出處鏈接及本聲明。
原文鏈接：https://blog.csdn.net/guoyanbo_81/article/details/80461462

總結

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

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