Qt qss样式表语法详解

一. Qt样式表简介

Qt样式表（style sheet）简称QSS，它是用于制定用户界面的强有力机制，其概念，术语，语法规则是受到HTML中的级联样式表（Cascading Style Sheets，CSS）启发而来的，只是QSS是是应用于窗体界面的。

二. Qt样式表语法

样式表由一系列的样式规则组成。一条样式规则由一个选择器和一个声明语句组成，选择器指明了哪个（或者说是哪种）控件将会受规则影响，而声明语句则指明了哪些属性会设置到这个（这些）控件，语法如下：

selector {attribute:value;}

• selector 代表选择器, 指明了哪个(或者说是哪种)控件将会受到规则影响。
• {attribute: value;} 代表声明语句, 其中 attribute 表示属性, value 表示属性的值, 属性与它的值之间必须以冒号（:）隔开, 属性值后面必须以分号（;）结束, 表示这条属性已经设置完成。
• 整条语句加起来的意思是, 在整个应用程序中, 被 selector 匹配的控件, 它们控件的 attribute 属性的值应该被设置为 value 。

三. Qt样式表选择器语法

类型	实例	含义
通配选择器	*	匹配所有控件
类型选择器	QPushButton	匹配所有QPushButton和其子类的实例
属性选择器	QPushButton[flat="false"]	匹配所有flat属性是false的QPushButton实例（可以是自定义属性，）
类选择器	.QPushButton	匹配所欲哦QPushButton的实例，但不匹配其子类，注意前面有一个点号
ID选择器	#myButton	匹配所有id为myButton的控件实例，这里的id需要用setObjectName函数设置
后代选择器	QDialog QPushButton	所有QDialog容器中包含的QPushButton（直接或间接）
子选择器	QDialog > QPushButton	所有QDialog容器下面的QPushButton（直接）

1. 通用选择器 *（又称通配符选择器）

* {attribute:value;}

• 通用选择器用（*）来表示, 它表示匹配程序中所有的 Widget。

2. 类型选择器 classname

claseename {attribute:value;}

• classname即 Widget 类名, 由 QObject :: metaObject() :: className()获取, 类型选择器匹配所有该类以及该类的派生类的对象。

以下为可选择的类型

控件	How to Style
QAbstractScrollArea	支持box model.继承QAbstractScrollArea的类, 例如QTextEdit, and QAbstractItemView (所有的项目视图类), 都支持通过设置background-attachment属性来完成随窗口滚动的背景图像. 将 background-attachment属性设置为fixed ，则背景图像将不随滚动条滚动. 设置background-attachment为scroll, 则当滚动条滚动时，背景也将跟随滚动.
QCheckBox	支持box model. 可以通过 ::indicator 来控制勾选框的勾选样式. 默认情况下，指示器位于控件内容区矩形的左上角。 可以通过 spacing 属性设置勾选框与字体的位置间距
QColumnView	可以通过 image 属性来说设置样式.可以通过 ::left-arrow 和 ::right-arrow 属性来设置箭头指示器样式.
QComboBox	支持box model. 下拉按钮可以通过 ::drop-down 属性来设置样式. 默认情况下，下拉按钮位于控件填充矩形的右上角. 下拉按钮内的箭头标记可以使用 ::down-arrow属性向下箭头子控件设置样式.默认情况下，箭头位于下拉子控件的内容矩形的中心.
QDateEdit	详见 QSpinBox.
QDateTimeEdit	详见QSpinBox.
QDialog	只支持background, background-clip 和 background-origin 属性.
QDialogButtonBox	可以通过 button-layout 属性设置按钮的布局.
QDockWidget	支持停靠时标题栏和标题栏按钮的样式更改. 可以通过设置 border 属性修改停靠窗口的边界. ::title属性可以用于自定义标题栏. 可以分别使用 ::close-button和 ::float-button 属性来设置关闭和悬浮按钮. When the title bar is vertical, the :vertical pseudo class is set. In addition, depending on QDockWidget::DockWidgetFeature, the :closable, :floatable and :movable pseudo states are set. Note: Use QMainWindow::separator to style the resize handle. Warning: The style sheet has no effect when the QDockWidget is undocked as Qt uses native top level windows when undocked. See Customizing QDockWidget for an example.
QDoubleSpinBox	See QSpinBox.
QFrame	Supports the box model. Since 4.3, setting a stylesheet on a QLabel automatically sets the QFrame::frameStyle property to QFrame::StyledPanel. See Customizing QFrame for an example.
QGroupBox	Supports the box model. The title can be styled using the ::title subcontrol. By default, the title is placed depending on QGroupBox::textAlignment. In the case of a checkable QGroupBox, the title includes the check indicator. The indicator is styled using the ::indicator subcontrol. The spacing property can be used to control the spacing between the text and indicator. See Customizing QGroupBox for an example.
QHeaderView	Supports the box model. The sections of the header view are styled using the ::section sub control. The section Sub-control supports the :middle, :first, :last, :only-one, :next-selected, :previous-selected, :selected, and :checked pseudo states. The sort indicator can be styled using the ::up-arrow and the ::down-arrow Sub-control. See Customizing QHeaderView for an example.
QLabel	Supports the box model. Does not support the :hover pseudo-state. Since 4.3, setting a stylesheet on a QLabel automatically sets the QFrame::frameStyle property to QFrame::StyledPanel. See Customizing QFrame for an example (a QLabel derives from QFrame).
QLineEdit	Support the box model. The color and background of the selected item is styled using selection-color and selection-background-color respectively. The password character can be styled using the lineedit-password-character property. The password mask delay can be changed using the lineedit-password-mask-delay See Customizing QLineEdit for an example.
QListView	Supports the box model. When alternating row colors is enabled, the alternating colors can be styled using the alternate-background-color property. The color and background of the selected item is styled using selection-color and selection-background-color respectively. The selection behavior is controlled by the show-decoration-selected property. Use the ::item subcontrol for more fine grained control over the items in the QListView. See QAbsractScrollArea to style scrollable backgrounds. See Customzing QListView for an example.
QListWidget	See QListView.
QMainWindow	Supports styling of the separator The separator in a QMainWindow when using QDockWidget is styled using the ::separator subcontrol. See Customizing QMainWindow for an example.
QMenu	Supports the box model. Individual items are styled using the ::item subcontrol. In addition to the usually supported pseudo states, item subcontrol supports the :selected, :default, :exclusive and the non-exclusive pseudo states. The indicator of checkable menu items is styled using the ::indicator subcontrol. The separator is styled using the ::separator subcontrol. For items with a sub menu, the arrow marks are styled using the right-arrow and left-arrow. The scroller is styled using the ::scroller. The tear-off is styled using the ::tearoff. See Customizing QMenu for an example.
QMenuBar	Supports the box model. The spacing property specifies the spacing between menu items. Individual items are styled using the ::item subcontrol. Warning: When running on Qt/Mac, the menu bar is usually embedded into the system-wide menu bar. In this case, the style sheet will have no effect. See Customizing QMenuBar for an example.
QMessageBox	The messagebox-text-interaction-flags property can be used to alter the interaction with text in the message box.
QProgressBar	Supports the box model. The chunks of the progress bar can be styled using the ::chunk subcontrol. The chunk is displayed on the Contents rectangle of the widget. If the progress bar displays text, use the text-align property to position the text. Indeterminate progress bars have the :indeterminate pseudo state set. See Customizing QProgressBar for an example.
QPushButton	Supports the box model. Supports the :default, :flat, :checked pseudo states. Since 5.15, the icon property can be set to override the button icon. For QPushButton with a menu, the menu indicator is styled using the ::menu-indicator subcontrol. Appearance of checkable push buttons can be customized using the :open and :closed pseudo-states. Warning: If you only set a background-color on a QPushButton, the background may not appear unless you set the border property to some value. This is because, by default, the QPushButton draws a native border which completely overlaps the background-color. For example, QPushButton { background-color: red; border: none; } See Customizing QPushButton for an example.
QRadioButton	Supports the box model. The check indicator can be styled using the ::indicator subcontrol. By default, the indicator is placed in the Top Left corner of the Contents rectangle of the widget. The spacing property specifies the spacing between the check indicator and the text. See Customizing QRadioButton for an example.
QScrollBar	Supports the box model. The Contents rectangle of the widget is considered to be the groove over which the slider moves. The extent of the QScrollBar (i.e the width or the height depending on the orientation) is set using the width or height property respectively. To determine the orientation, use the :horizontal and the :vertical pseudo states. The slider can be styled using the ::handle subcontrol. Setting the min-width or min-height provides size constraints for the slider depending on the orientation. The ::add-line subcontrol can be used to style the button to add a line. By default, the add-line subcontrol is placed in top right corner of the Border rectangle of the widget. Depending on the orientation the ::right-arrow or ::down-arrow. By default, the arrows are placed in the center of the Contents rectangle of the add-line subcontrol. The ::sub-line subcontrol can be used to style the button to subtract a line. By default, the sub-line subcontrol is placed in bottom right corner of the Border rectangle of the widget. Depending on the orientation the ::left-arrow or ::up-arrow. By default, the arrows are placed in the center of the Contents rectangle of the sub-line subcontrol. The ::sub-page subcontrol can be used to style the region of the slider that subtracts a page. The ::add-page subcontrol can be used to style the region of the slider that adds a page. See Customizing QScrollBar for an example.
QSizeGrip	Supports the width, height, and image properties. See Customizing QSizeGrip for an example.
QSlider	Supports the box model. For horizontal slides, the min-width and height properties must be provided. For vertical sliders, the min-height and width properties must be provided. The groove of the slider is styled using the ::groove. The groove is positioned by default in the Contents rectangle of the widget. The thumb of the slider is styled using ::handle subcontrol. The subcontrol moves in the Contents rectangle of the groove subcontrol. See Customizing QSlider for an example.
QSpinBox	The frame of the spin box can be styled using the box model. The up button and arrow can be styled using the ::up-button and ::up-arrow subcontrols. By default, the up-button is placed in the top right corner in the Padding rectangle of the widget. Without an explicit size, it occupies half the height of its reference rectangle. The up-arrow is placed in the center of the Contents rectangle of the up-button. The down button and arrow can be styled using the ::down-button and ::down-arrow subcontrols. By default, the down-button is placed in the bottom right corner in the Padding rectangle of the widget. Without an explicit size, it occupies half the height of its reference rectangle. The bottom-arrow is placed in the center of the Contents rectangle of the bottom-button. See Customizing QSpinBox for an example.
QSplitter	Supports the box model. The handle of the splitter is styled using the ::handle subcontrol. See Customizing QSplitter for an example.
QStatusBar	Supports only the background property. The frame for individual items can be style using the ::item subcontrol. See Customizing QStatusBar for an example.
QTabBar	Individual tabs may be styled using the ::tab subcontrol. Close buttons using the ::close-button The tabs support the :only-one, :first, :last, :middle, :previous–selected, :next-selected, :selected pseudo states. The :top, :left, :right, :bottom pseudo states depending on the orientation of the tabs. Overlapping tabs for the selected state are created by using negative margins or using the absolute position scheme. The tear indicator of the QTabBar is styled using the ::tear subcontrol. QTabBar used two QToolButtons for its scrollers that can be styled using the QTabBar QToolButton selector. To specify the width of the scroll button use the ::scroller subcontrol. The alignment of the tabs within the QTabBar is styled using the alignment property. To change the position of the QTabBar within a QTabWidget, use the tab-bar subcontrol (and set subcontrol-position). See Customizing QTabBar for an example.
QTabWidget	The frame of the tab widget is styled using the ::pane subcontrol. The left and right corners are styled using the ::left-corner and ::right-corner respectively. The position of the tab bar is controlled using the ::tab-bar subcontrol. By default, the subcontrols have positions of a QTabWidget in the QWindowsStyle. To place the QTabBar in the center, set the subcontrol-position of the tab-bar subcontrol. The :top, :left, :right, :bottom pseudo states depending on the orientation of the tabs. See Customizing QTabWidget for an example.
QTableView	Supports the box model. When alternating row colors is enabled, the alternating colors can be styled using the alternate-background-color property. The color and background of the selected item is styled using selection-color and selection-background-color respectively. The corner widget in a QTableView is implemented as a QAbstractButton and can be styled using the “QTableView QTableCornerButton::section” selector. Warning: If you only set a background-color on a QTableCornerButton, the background may not appear unless you set the border property to some value. This is because, by default, the QTableCornerButton draws a native border which completely overlaps the background-color. The color of the grid can be specified using the gridline-color property. See QAbsractScrollArea to style scrollable backgrounds. See Customzing QTableView for an example.
QTableWidget	See QTableView.
QTextEdit	Supports the box model. The color and background of selected text is styled using selection-color and selection-background-color respectively. See QAbsractScrollArea to style scrollable backgrounds.
QTimeEdit	See QSpinBox.
QToolBar	Supports the box model. The :top, :left, :right, :bottom pseudo states depending on the area in which the tool bar is grouped. The :first, :last, :middle, :only-one pseudo states indicator the position of the tool bar within a line group (See QStyleOptionToolBar::positionWithinLine). The separator of a QToolBar is styled using the ::separator subcontrol. The handle (to move the toolbar) is styled using the ::handle subcontrol. See Customizing QToolBar for an example.
QToolButton	Supports the box model. If the QToolButton has a menu, is ::menu-indicator subcontrol can be used to style the indicator. By default, the menu-indicator is positioned at the bottom right of the Padding rectangle of the widget. If the QToolButton is in QToolButton::MenuButtonPopup mode, the ::menu-button subcontrol is used to draw the menu button. ::menu-arrow subcontrol is used to draw the menu arrow inside the menu-button. By default, it is positioned in the center of the Contents rectangle of the menu-button subcontrol. When the QToolButton displays arrows, the ::up-arrow, ::down-arrow, ::left-arrow and ::right-arrow subcontrols are used. Warning: If you only set a background-color on a QToolButton, the background will not appear unless you set the border property to some value. This is because, by default, the QToolButton draws a native border which completely overlaps the background-color. For example, QToolButton { background-color: red; border: none; } See Customizing QToolButton for an example.
QToolBox	Supports the box model. The individual tabs can by styled using the ::tab subcontrol. The tabs support the :only-one, :first, :last, :middle, :previous-selected, :next-selected, :selected pseudo states.
QToolTip	Supports the box model. The opacity property controls the opacity of the tooltip. See Customizing QFrame for an example (a QToolTip is a QFrame).
QTreeView	Supports the box model. When alternating row colors is enabled, the alternating colors can be styled using the alternate-background-color property. The color and background of the selected item is styled using selection-color and selection-background-color respectively. The selection behavior is controlled by the show-decoration-selected property. The branches of the tree view can be styled using the ::branch subcontrol. The ::branch Sub-control supports the :open, :closed, :has-sibling and :has-children pseudo states. Use the ::item subcontrol for more fine grained control over the items in the QTreeView. See QAbsractScrollArea to style scrollable backgrounds. See Customizing QTreeView for an example to style the branches.
QTreeWidget	See QTreeView.
QWidget	Supports only the background, background-clip and background-origin properties. If you subclass from QWidget, you need to provide a paintEvent for your custom QWidget as below: void CustomWidget::paintEvent(QPaintEvent *) { QStyleOption opt; opt.init(this); QPainter p(this); style()->drawPrimitive(QStyle::PE_Widget, &opt, &p, this); } The above code is a no-operation if there is no stylesheet set. Warning: Make sure you define the Q_OBJECT macro for your custom widget.

3. 类选择器 .classname

.claseename {attribute:value;}

• classname即 Widget 类名, 类选择器的类名前面有一个（.）, 这种选择器只会匹配该类的所有对象, 而不会匹配其派生类的对象。

4. ID选择器 claseename#id

claseename#id {attribute:value;}

• classname即 Widget 类名, id 指的是控件类的 objectName，“#” + objectName 表示匹配所有 objectName 为 ID选择器所指定名称的Widget，为其设置样式。

5. 后代选择器 selector1 selector2

selector1 selector2 {attribute:value;}

• 即在选择器1（selector1） 匹配的所有对象中, 找到选择器2（selector2） 所匹配的所有后代对象, 并给它们设置样式。

6. 子元素选择器 selector1>selector2

selector1>selector2 {attribute:value;}

• 表示找到选择器1 （selector1）匹配到的对象中的选择器2 （selector2）控件里的直接子元素然后设置样式。

7. 属性选择器 [attribute=value]

[attribute=value] {attribute:value;}
[attribute|=value] {attribute:value;}
[attribute~=value] {attribute:value;}

• attribute=value 表示匹配有特定属性 attribute, 并且值为 value 的所有控件, 然后设置样式。
• attribute|=value 表示匹配有特定属性 attribute, 并且值以 value 开头的所有控件, 然后设置样式。
• attribute~=value 表示匹配有特定属性 attribute, 并且值包含value 的所有控件, 然后设置样式。

8. 子控件选择器 selector1::classname

selector1::classname {attribute:value;}

• 表示对类型选择器或类选择器指定的所有控件的子控件设置样式。

以下子控件可用：

子控件	描述说明
::add-line	添加 QScrollBar的按钮.
::add-page	控制柄（滑块）和 QScrollBar的add-line之间的区域.
::branch	QTreeView的分支指示器.
::chunk	QProgressBar的进度条.
::close-button	QDockWidget或QTabBar选项卡的关闭按钮
::corner	QAbstractScrollArea中两个滚动条之间的角
::down-arrow	QComboBox, QHeaderView (排序指示器), QScrollBar or QSpinBox中向下的箭头
::down-button	QScrollBar,QSpinBox中的向下按钮
::drop-down	QComboBox的下拉按钮
::float-button	QDockWidget的浮动按钮
::groove	QSlider的滑动槽
::indicator	QAbstractItemView, QCheckBox, QRadioButton, 可勾选的 QMenu ,可勾选的 QGroupBox中的指示器
::handle	QScrollBar, QSplitter, QSlider控件的滑动手柄
::icon	QAbstractItemView ,QMenu的图标
::item	QAbstractItemView, QMenuBar, QMenu, QStatusBar中的一个项目
::left-arrow	QScrollBar的左箭头
::left-corner	QTabWidget的左角.例如，此控件可用于控制QTabWidget中左角的控件
::menu-arrow	带有菜单的 QToolButton 的箭头。
::menu-button	QToolButton的菜单按钮
::menu-indicator	QPushButton的菜单指示器
::right-arrow	QMenu,QScrollBara的右箭头
::pane	QTabWidget的窗格（框架）
::right-corner	QTabWidget的右角.例如，此控件可用于控制QTabWidget中右角的控件
::scroller	QMenu, QTabBar的滚动条
::section	QHeaderView的块
::separator	QMenu , QMainWindowa的分隔符
::sub-line	QScrollBar中减去一行的按钮
::sub-page	控制柄（滑块）和 QScrollBar中 sub-line之间的区域。
::tab	QTabBar , QToolBox中的选项卡
::tab-bar	QTabWidget的选项卡
::tear	QTabBar中的可分开的指示器
::tearoff	QMenu中的可分开的指示器
::text	QAbstractItemView的文本部分
::title	QGroupBox , QDockWidget的标题
::up-arrow	QComboBox, QHeaderView (排序指示器), QScrollBar or QSpinBox中向上的箭头
::up-button	QScrollBar,QSpinBox中的向上按钮

9. 伪状态选择器 selector1:statues

selector1::statues {attribute:value;}

• 表示对类型选择器或类选择器指定的所有控件设置它在指定状态时的样式。
  支持以下伪状态：

伪状态	描述说明
:active	当控件位于活动窗口中时，将设置此状态.
:adjoins-item	当QTreeView中的 ::branch于某个项目相邻时，为该状态.
:alternate	当QAbstractItemView::alternatingRowColors()被设置为true时，在绘制QAbstractItemView行时，为每个多选行设置此状态 .
:bottom	该项目被至于窗口的底部时. 例如, QTabBar中的选项页被至于窗口底部.
:checked	该项目处于选中状态时.
:closable	该项目可以被关闭. 例如, QDockWidget 可以设置 QDockWidget::DockWidgetClosable为开
:closed	该项目处于关闭状态. 例如, 位于 QTreeView中的未展开项目
:default	该项目处于默认状态. 例如, 一个默认的 QPushButton 或者QMenu中默认的动作.
:disabled	该项目处于disabled状态.
:editable	QComboBox可编辑.
:edit-focus	该项目处于编辑状态.
:enabled	该项目处于enabled状态.
:exclusive	该项目是独占项目组的一部分. 例如,在 QActionGroup中的独占菜单项.
:first	该项目为一个列表中的第一项 . 例如, QTabBar中的第一个选项.
:flat	该项目是平面的. 例如, 一个 flat QPushButton.
:floatable	该项目是浮动的. 例如, QDockWidget 有QDockWidget::DockWidgetFloatable 属性可以被设置为开启.
:focus	该项目具有输入焦点input focus.
:has-children	该项目有子项目. 例如, QTreeView 中的项目有子项目.
:has-siblings	该项具有同级项. 例如, QTreeView 中的同级项.
:horizontal	该项目具有水平方向.
:hover	鼠标悬停在项目上.
:indeterminate	该项具有不确定状态. 例如, a QCheckBox 或者 QRadioButton 只有一部分被选中.
:last	该项目处于一个列表的最后边. 例如, QTabBar中最后的选项卡.
:left	该项目处于窗口的左边. 例如, QTabBar中靠左的选项卡 .
:maximized	该项目处于最大化状态. 例如, 最大化的QMdiSubWindow.
:middle	该项目处于一个列表的中间部位. 例如, QTabBar中处于中间段的选项卡.
:minimized	该项目处于最小化状态. 例如, 最小化的QMdiSubWindow.
:movable	该项目是可以移动的. 例如, QDockWidget 可以设置QDockWidget::DockWidgetMovable为开启.
:no-frame	该项目没有框架
:non-exclusive	该项是非独占项组的一部分. 例如, QActionGroup中的非独占菜单项.
:off	对于可以切换的项目，适用于处于"off"状态的项目.
:on	对于可以切换的项目，适用于处于"on"状态的项目.
:only-one	该项目在列表中是独有的. 例如, QTabBar中的一个单独的标签.
:open	该项目处于打开状态. For example, an expanded item in a QTreeView, or a QComboBox or QPushButton with an open menu.
:next-selected	该项目中的下一个项是选中的. 例如, QTabBar 中当前页的下一页被选中.
:pressed	正在使用鼠标按下该项.
:previous-selected	该项目中的上一个项是选中的. 例如, QTabBar 中当前页的上一页被选中.
:read-only	项目标记为只读或不可编辑
:right	该项目处于窗口的右边. 例如, QTabBar中靠右的选项卡
:selected	该项目被选中. 例如,
:top	该项目被至于窗口的顶部时. 例如, QTabBar中的选项页被至于窗口顶部.
:unchecked	该项目处于unchecked状态.
:vertical	该项目具有垂直方向.
:window	该控件为一个窗口