一。文法

qt樣式表（qss）的基本文法和css基本一樣，熟悉css的使用的話其他樣式表也差不多都會了。

1.qt樣式表主要有選擇器和聲明2部分組成，基本文法如下：

qt樣式表筆記一。文法二。選擇器三。僞狀态四。子部件五。屬性六：部分控件的主要樣式設定：七。沖突規則補充：qt遵循css2規則下列是一個綜合例子：

使用時可直接調用類的成員函數setStyleSheep("......")，這時不需要指定選擇器直接寫聲明，本身這個類就是選擇器了;也可以使用main函數裡的app.setStyleSheep()直接設定全局樣式，這時就需要指定選擇器了；

不需要選擇器的寫法

需要選擇器的寫法

2.一次指定多個選擇器：

當多個選擇器裡的聲明一樣時（如邊框，背景，顔色等），可以直接同時寫多個選擇器，用逗号（，）分隔：

等同于下圖：

ps：感覺這個使用會很少；

3.指定多個屬性：

當需要在聲明中指定多個屬性時需要使用分号（；）隔開：

4.對某個屬性的多個值的規則：

當你需要對某個屬性中的多個值指派時可以：

上述位簡寫，等同于下圖：

這是使用規則3的寫法，把屬性中的每個值都看做一個屬性，使用分号隔開；

二。選擇器

前面講到樣式表由選擇器和聲明組成，選擇器确定聲明描述的對象（某些寫法不需要選擇器）；qt提供了下列幾種選擇器：

ps：目前我常用的是類型選擇器，類選擇器和id選擇器；

三。僞狀态

每個部件都會有幾種不同的狀态，例如說按鍵有正常的狀态，點選的狀态（pressed），滑鼠在上方的狀态（hover），不可選中的狀态等狀态（disabled）；例子如下：

QPushButton { font-family:Microsoft Yahei; font-size:20pt; color:white; background-color:rgb(14 , 150 , 254); border-radius:8px; }

QPushButton:hover { background-color:rgb(44 , 137 , 255); }

QPushButton:pressed { background-color:rgb(14 , 135 , 228); padding-left:3px; padding-top:3px; }

僞狀态都有其專用的辨別符，使用冒号（：）連接配接在選擇器上；每個僞狀态要單獨起一段（相當于每個僞狀态是一個特殊的選擇器）；

僞狀态有很多，每個部件可能都有其獨特的僞狀态，下列是僞狀态圖：

ps：常用的僞狀态為正常，禁用，懸浮，選中；

四。子部件

對于複雜的控件來說，都是由幾個部件組成，例如下拉框這個部件由下拉按鍵，下拉框和行編輯器組成；每個子部件都能使用樣式表來設定樣式，在選擇器後面使用雙冒号（::）連接配接：

QComboBox {
    border: 1px solid gray;
    border-radius: 3px;
    padding: 1px 18px 1px 3px;
    min-width: 6em;
}

QComboBox::drop-down {
    subcontrol-origin: padding;
    subcontrol-position: top right;
    width: 15px;

    border-left-width: 1px;
    border-left-color: darkgray;
    border-left-style: solid; /* just a single line */
    border-top-right-radius: 3px; /* same radius as the QComboBox */
    border-bottom-right-radius: 3px;
}
/*下拉框*/
QComboBox::down-arrow {
    image: url(/usr/share/icons/crystalsvg/16x16/actions/1downarrow.png);
}

下列是子部件的辨別符：

五。屬性

屬性用于聲明裡控制各種樣式，基本屬性有邊框（border），背景（background），字型（font），顔色（color，這裡的顔色特指字型的顔色，也算是前景色），圖示（icon）等；

屬性實在是太多了，這裡就不列舉了。具體的屬性需要上網查詢；

六：部分控件的主要樣式設定：

按鍵類型

對話框，文本類型

視窗類型

滾動條類型

頁籤

視圖/模型

其他部件

七。沖突規則

1.繼承沖突

樣式表可以在QApplication，父部件，子部件上設定，優先度由小到大，即優先自己的設定（注意，字型的屬性不會被繼承，需要獨自設計或者使用

）；

2.當有多個選擇器時優先于特殊的選擇器（id選擇器優先于類型選擇器）

3.特殊性相同時，優先先寫的（是以基本正常狀态先寫）

補充：

自定義的類需要支援qss時隻需要加上哪個支援槽函數的宏

想要加命名空間的話

qt遵循css2規則

下列是一個綜合例子：

效果圖：

代碼：

/* Customize any plain widget that is a child of a QMainWindow. */
QMainWindow > .QWidget {
    background-color: gainsboro;
    background-image: url(:/images/pagefold.png);
    background-position: top right;
    background-repeat: no-repeat
}

/* Provide a padding for the layout inside the frame. The frame
   exists only to provide a padding for the top-right image, so we
   explicitly disable the border. */
#mainFrame {
    padding-right: 30px;
    border-style: none;
    border-image: none; /* since we set a border-image below */
}

/* mainFrame won't have this border-image since we have
   explicitly set it to 'none' using a more specific selector. */
QFrame, QLineEdit, QComboBox[editable="true"], QSpinBox {
    border-image: url(:/images/frame.png) 4;
    border-width: 3;
}

QLabel {
    border: none;
    border-image: none;
    padding: 0;
    background: none;
}

/* Make text in message boxes selectable. */
QMessageBox {
    /* LinksAccessibleByMouse | TextSelectableByMouse */
    messagebox-text-interaction-flags: 5;
}
   
/* Set the selection colors for all widgets. */
QWidget {
    selection-color: black;
    selection-background-color: Silver;
    color: black;
}

/* Make the entire row selected in item views. */
QAbstractItemView {
    show-decoration-selected: 1;
}

/* Nice WindowsXP-style password character for password line edits. */
QLineEdit[echoMode="2"] {
    lineedit-password-character: 9679;
}

/* Customize tooltips. */
QToolTip {
    background-color: rgb(200,200,255);
    border-color: darkslategray;
    border-width: 1px;
    border-style: solid;
    padding: 3px;
    font: bold;
    border-radius: 3px;
    opacity: 200;
}

/* Customize radio buttons. */

QRadioButton {
    spacing: 5px;
}

QRadioButton::indicator {
    width: 13px;
    height: 13px;
}

QRadioButton::indicator::unchecked {
    image: url(:/images/radiobutton_unchecked.png);
}

QRadioButton::indicator:unchecked:hover {
    image: url(:/images/radiobutton_unchecked_hover.png);
}

QRadioButton::indicator:unchecked:pressed {
    image: url(:/images/radiobutton_unchecked_pressed.png);
}

QRadioButton::indicator::checked {
    image: url(:/images/radiobutton_checked.png);
}

QRadioButton::indicator:checked:hover {
    image: url(:/images/radiobutton_checked_hover.png);
}

QRadioButton::indicator:checked:pressed {
    image: url(:/images/radiobutton_checked_pressed.png);
}

/* Customize arrows. */

*::down-arrow, *::menu-indicator {
    image: url(:/images/down_arrow.png);
    width: 7px;
    height: 7px;
}

*::down-arrow:disabled, *::down-arrow:off {
   image: url(:/images/down_arrow_disabled.png);
}

*::up-arrow {
    image: url(:/images/up_arrow.png);
    width: 7px;
    height: 7px;
}

*::up-arrow:disabled, *::up-arrow:off {
   image: url(:/images/up_arrow_disabled.png);
}

/* Customize push buttons and comboboxes. Our read-only combobox
   is very similar to a push button, so they share the same border image. */

QPushButton {
    min-width: 4em;
}

QPushButton, QComboBox[editable="false"],
QComboBox[editable="true"]::drop-down {
    border-image: url(:/images/pushbutton.png) 5;
    border-width: 5;
}

QPushButton:hover, QComboBox[editable="false"]:hover,
QComboBox[editable="true"]::drop-down:hover, QMenuBar::item:hover {
    border-image: url(:/images/pushbutton_hover.png) 5;
    border-width: 5;
}

QPushButton:pressed, QComboBox[editable="false"]:on,
QComboBox[editable="true"]::drop-down:on, QMenuBar::item:on {
    border-image: url(:/images/pushbutton_pressed.png) 5;
    border-width: 5;
}

/* Customize read-only comboboxes. */

QComboBox[editable="false"] {
    padding-left: 3px;
    padding-right: 20px; /* space for the arrow */
}

QComboBox[editable="false"]::drop-down {
    subcontrol-origin: padding;
    subcontrol-position: top right;
    width: 15px;
    border-left-style: solid;
    border-left-color: darkgray;
    border-left-width: 1px;
}

QComboBox[editable="false"]::down-arrow {
    subcontrol-origin: content;
    subcontrol-position: center;
    position: relative;
    left: 1px; /* 1 pixel dropdown border */
}

/* The combobox arrow is on when the popup is open. */
QComboBox[editable="false"]::down-arrow:on {
    position: relative;
    top: 1px;
    left: 2px;
}

/* Customize editable comboboxes. */

QComboBox[editable="true"] {
    padding-right: 16px;
}

QComboBox[editable="true"]::drop-down {
    subcontrol-origin: border;
    subcontrol-position: top right;
    width: 13px;
    position: absolute;
    top: 2px;
    bottom: 2px;
    right: 2px;
}

QComboBox[editable="true"]::drop-down,
QComboBox[editable="true"]::drop-down:hover,
QComboBox[editable="true"]::drop-down:on {
    border-width: 0px;  
    border-left-width: 3px; /* we need only left and center part */
}

/* Shift the arrow when it's open. */
QComboBox[editable="true"]::down-arrow:on {
    position: relative;
    top: 1px;
    left: 1px;
}

/* Customize check boxes. */
QCheckBox {
    spacing: 5px;
}

QCheckBox::indicator {
    width: 13px;
    height: 13px;
}

QCheckBox::indicator:unchecked {
    image: url(:/images/checkbox_unchecked.png);
}

QCheckBox::indicator:unchecked:hover {
    image: url(:/images/checkbox_unchecked_hover.png);
}

QCheckBox::indicator:unchecked:pressed {
    image: url(:/images/checkbox_unchecked_pressed.png);
}

QCheckBox::indicator:checked {
    image: url(:/images/checkbox_checked.png);
}

QCheckBox::indicator:checked:hover {
    image: url(:/images/checkbox_checked_hover.png);
}

QCheckBox::indicator:checked:pressed {
    image: url(:/images/checkbox_checked_pressed.png);
}

/* Customize the size grip. */
QSizeGrip {
    image: url(:/images/sizegrip.png);
    width: 16px;
    height: 16px;
}

/* Customize the menu bar. */
QMenuBar {
    border-image: none;
    border-style: none;
    border-width: 1px;
    border-bottom-style: solid;
    border-bottom-color: darkslategray;
    padding: 2px;
}

/* Customize spin boxes. */

QSpinBox { 
    padding-right: 15px;
}

QSpinBox::up-button {
    subcontrol-origin: border;
    subcontrol-position: top right;

    width: 16px; /* 16 + 2*1px border-width = 15px padding + 3px parent border */
    border-image: url(:/images/spinup.png) 1;
    border-width: 1px;
}

QSpinBox::up-button:hover {
    border-image: url(:/images/spinup_hover.png) 1;
}

QSpinBox::up-button:pressed {
    border-image: url(:/images/spinup_pressed.png) 1;
}

QSpinBox::down-button {
    subcontrol-origin: border;
    subcontrol-position: bottom right;

    width: 16px;
    border-image: url(:/images/spindown.png) 1;
    border-width: 1px;
    border-top-width: 0;
}

QSpinBox::down-button:hover {
    border-image: url(:/images/spindown_hover.png) 1;
}

QSpinBox::down-button:pressed {
    border-image: url(:/images/spindown_pressed.png) 1;
}