前言

本文分享QT界面设计中的QSS样式技术，主要从**、**和**方面展开，希望对各位小伙伴有所帮助！学会了QSS样式设计，就可以开动你的审美，制作出令人羡慕的软件界面了。

感谢各位小伙伴的点赞+关注，小易会继续努力分享，一起进步！

你的点赞就是我的动力(＾Ｕ＾)ノ~ＹＯ

我将收获到的：

QT样式表的语法及用法
常见的伪状态和属性列表

3.常用好用的网址推荐

前言

[1. Qt样式表语法](#1. Qt样式表语法)

[2. Qt样式表用法](#2. Qt样式表用法)

[3. selector设置](#3. selector设置)

[4. 属性列表](#4. 属性列表)

[5. QT官方参考网站](#5. QT官方参考网站)

[6. 常见冲突（样式不生效原因）](#6. 常见冲突（样式不生效原因）)

结论：

1. Qt样式表语法

》语法：selector { attribute: value }

**》**其中，selector可以是控件类型，控件名称等，如QLineEdit， #lineEdit_1；

attribute：属性，如color、border、background等

value：值，属性设置的值

2. Qt样式表用法

》使用setStyleSheet，如

cpp 复制代码

    qApp->setStyleSheet("QLineEdit { background-color: yellow }");
    myDialog->setStyleSheet("QLineEdit { background-color: yellow }");

》ui文件里的StyleSheet，如

》QSS文件

cpp 复制代码

    QFile file(":/res/dark.qss");/*QSS文件所在的路径*/
    file.open(QFile::ReadOnly);
    QTextStream filetext(&file);
    QString stylesheet = filetext.readAll();
    this->setStyleSheet(stylesheet);
    file.close();

3. selector设置

》selector类型说明

|---------|-------------------------------|--------------------------------------|
| 选择器 | 示例 | 说明 |
| 通用选择器 | * | 匹配所有部件 |
| 类型选择器 | QPushButton | 匹配所有QPushButton示例及它的所有子类 |
| 属性选择器 | QPushButton[flat = "false"] | 匹配QPushButton的属性flat为false的示例 |
| 类选择器 | .QPushButton | 匹配所有QPushButton示例，但不包括它的子类 |
| ID选择器 | QPushButton#myButton | 匹配所有QPushButton中myButton对象的实例 |
| 后代选择器 | QDialog QPushButton | 匹配所有QPushButton实例，它们必须是QDialog的子孙部件 |
| 孩子选择器 | QDialog>QPushButton | 匹配所有QPushButton实例，它们必须是QDialog直系孩子部件 |

》selector控件的可设置样式

具体各控件的可设置样式请在以下文章中查找Qt界面设计_雪易的博客-CSDN博客

》selector访问子控件

示例如下，

cpp 复制代码

            QTabWidget::pane{ /* The tab widget frame */
                border: 1px solid #00BB9E;
                border - radius:5px;
            
            }
            
            QTabWidget::tab - bar{
                alignment: left;
            }

具体各控件的子控件请在以下文章中查找Qt界面设计_雪易的博客-CSDN博客

》selector设置伪状态

》选择器可以使用状态来限制在部件的指定状态上的应用。伪状态在选择器之后，用冒号隔离。如：鼠标悬停在按钮上时其按钮的颜色为白色：QPushButton:hover{color:white}

鼠标不悬停在按钮上时其按钮的颜色为l蓝色(!表否定)：QPushButton:!hover{color:blue}

》伪状态可多个连用，达到逻辑与效果。如：鼠标悬停在一个被选中的QCheckBox部件上时才应用规则：QCheckBox:hover:checked{color:white}

》伪状态可通过逗号达到逻辑或效果。如：QCheckBox:hover,checked{color:white}

》伪状态和子部件联合使用。如：QComboBox::drop-down:hover{image:url(dropdown_bright.png)}

|--------------------|--------------------------------------------------------------------------------------|
| 伪状态 | 描述 |
| :active | 此状态在小部件驻留在活动窗口时设置 |
| :adjoins-item | 此状态在QTreeView的::branch与一个item相邻时设置 |
| :alternate | 当QAbstractItemView::alternatingRowColors()设置为真时，在绘制QAbstractItemView的行时，为每个交替行设置此状态 |
| :bottom | 此item位于底部。例如，QTabBar有位于底部的选项卡 |
| :checked | 此item被选中。例如，QAbstractButton的checked状态 |
| :closable | 此item可以被关闭。例如，QDockWidget的QDockWidget::DockWidgetClosable特性开启时 |
| :closed | 此item处于关闭状态。例如，QTreeView中未展开的item |
| :default | 此item的默认状态。例如，一个default的QPushButton或QMenu中的一个默认动作 |
| :disabled | 此item被禁用时的状态 |
| :editable | 如QComboBox是可编辑的 |
| :edit-focus | 此item具有编辑焦点(参考QStyle::State_HasEditFocus)。此状态仅对Qt扩展应用程序可用 |
| :enabled | 此item已启用 |
| :exclusive | 此item是一个独占项组的一部分。例如，独占QActionGroup中的菜单项 |
| :first | 此item是列表中的第一项。例如，QTabBar中的第一个选项卡 |
| :flat | 此item是平的。例如，一个扁平的QPushButton |
| :floatable | 此item可以浮动。例如，QDockWidget的QDockWidget::DockWidgetFloatable的特性开启时 |
| :focus | 此item具有输入焦点 |
| :has-children | 此item具有子对象。例如，QTreeView中具有子项的项 |
| :has-sibling | 此item具有兄弟对象。例如，QTreeView中与之相邻的项 |
| :horizontal | 此item处于水平方向 |
| :hover | 鼠标悬浮在此item上 |
| :indeterminate | 此item处于不确定状态。例如，QCheckBox或QRadioButton被部分选中 |
| :last | 此item是列表中的最后一项。例如，QTabBar中的最后一个选项卡 |
| :left | 此item位于左侧。例如，QTabBar有位于左侧的选项卡 |
| :maximized | 此item处于最大化状态。例如，一个最大化的QMdiSubWindow |
| :middle | 此item是列表中的中间一项。例如，一个不在QTabBar中的开头或结尾的选项卡 |
| :minimized | 此item处于最小化状态。例如，一个最小化的QMdiSubWindow |
| :movable | 此item可以被移动。例如， QDockWidget的QDockWidget::DockWidgetMovable特性开启时 |
| :no-frame | 此item没有边框。例如，没有边框的QSpinBox或QLineEdit |
| :non-exclusive | 此item是一个非独占项组的一部分。例如，非独占QActionGroup中的菜单项 |
| :off | 对可以切换的items，这适用于处于off状态的item |
| :on | 对可以切换的items，这适用于处于on状态的widget |
| :only-one | 此item是列表中的唯一的一项。例如，一个在QTabBar中单独的选项卡 |
| :open | 此item处于打开状态。例如，QTreeView中的展开项，或带有菜单的QComboBox或QPushButton |
| :next-selected | 此item是列表中的下一个被选中的项。例如，在QTabBar中当前选项卡的下一个要选中的选项卡 |
| :pressed | 鼠标正在按压在此item上 |
| :previous-selected | 此item是列表中的上一个被选中的项。例如，在QTabBar中当前选项卡的上一个要选中的选项卡 |
| :read-only | 此item处于只读或不可编辑状态。例如，一个只读QLineEdit或不可编辑的QComboBox |
| :right | 此item位于右侧。例如，QTabBar有位于右侧的选项卡 |
| :selected | 此item处于选中状态。例如，一个在QTabBar中被选中的选项卡或一个在菜单中被选中的菜单项 |
| :top | 此item位于顶部。例如，QTabBar有位于顶部的选项卡 |
| :unchecked | 此item处于未被选中状态 |
| :vertical | 此item处于垂直方向 |
| :window | 小部件是一个窗口(例如，一个顶层小部件) |

4. 属性列表

常见的属性如下

|---------------------------------------------|--------------------------------------|-------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| attribute属性 | 类型 | 描述 |
| alternate-background-color | Brush | 交替背景色。 |
| background | Background | 背景，相当于指定background-color、background-image、background-repeat和background-position。 |
| background-color | Brush | 背景颜色，例如： |
| background-image | Url | 背景图像（图像的半透明部分会被背景颜色穿透）。 |
| background-repeat | Repeat | 背景图像如何充满背景矩形，如果未指定此属性，背景图像将在两个方向上重复(repeat)。 |
| background-position | Alignment | 背景图像在背景原点矩形内的对齐。如果未指定此属性，则对齐方式为左上角。 |
| background-attachment | Attachment | 背景图像是否相对于视口进行滚动或固定。默认情况下，背景图像随视口滚动。 |
| background-clip | Origin | 规定背景的绘制区域。如果未指定此属性，则默认为border。 border：背景被裁剪到边框盒 padding：背景被裁剪到内边距框 content：背景被裁剪到内容框 |
| background-origin | Origin | 背景图像相对于什么来定位。如果未指定此属性，则默认为 padding 填充。 padding：背景图像相对于内边距框来定位 border：背景图像相对于边框盒来定位 content：背景图像相对于内容框来定位 |
| border | Border | 设置 4 个边框的样式，按照一下顺序进行设置： border-width，border-style，border-color。 |
| border-top | Border | 顶部边框 |
| border-bottom | Border | 底部边框 |
| border-right | Border | 右边边框 |
| border-left | Border | 左边边框 |
| border-color | Box Colors | 边框的颜色。 |
| border-top-color | Brush | 边框上边缘颜色 |
| border-bottom-color | Brush | 边框下边缘颜色 |
| border-right-color | Brush | 边框右边缘颜色 |
| border-left-color | Brush | 边框左边缘颜色 |
| border-image | Border Image | 填充边框的图像 |
| border-radius | Radius | 边角的半径，即边角圆弧。 |
| border-top-left-radius | Radius | 左上角圆弧 |
| border-top-right-radius | Radius | 右上角圆弧 |
| border-bottom-right-radius | Radius | 右下角圆弧 |
| border-bottom-left-radius | Radius | 左下角圆弧 |
| border-style | Border Style | 边框边缘的样式，若未指定默认为none。 |
| border-top-style | Border Style | 边框上边缘的样式 |
| border-bottom-style | Border Style | 边框下边缘的样式 |
| border-right-style | BorderStyle | 边框右边缘的样式 |
| border-left-style | BorderStyle | 边框左边缘的样式 |
| border-width | Box Lengths | 边框的宽度。 |
| border-top-width | Box Lengths | 上边框的宽度 |
| border-bottom-width | Box Lengths | 下边框的宽度 |
| border-right-width | Box Lengths | 右边框的宽度 |
| border-left-width | Box Lengths | 左边框的宽度 |
| bottom | Length | 在部件边底部其子控件向上的偏移量，即元素与底部边缘的距离。 |
| top | Length | 在部件边顶部其子控件向下的偏移量，即元素与顶部边缘的距离。 |
| right | Length | 在部件右边其子控件向左的偏移量，即元素与右边缘的距离。 |
| left | Length | 在部件左边其子控件向右的偏移量，即元素与左边缘的距离。 |
| button-layout | Number | QDialogButtonBox或QMessageBox中的按钮布局。取值为0 (WinLayout)、1 (MacLayout)、2 (KdeLayout)、 3 (GnomeLayout)和5 (AndroidLayout)。如果未指定此属性，它默认为SH_DialogButtonLayout样式提示的当前样式所指定的值。 |
| color | Brush | 渲染文本的颜色，默认值为黑色。 |
| dialogbuttonbox-buttons-have-icons | Boolean | QDialogButtonBox中的按钮是否显示图标如果这个属性被设置为1, QDialogButtonBox的按钮显示图标; 如果设置为0，则不显示图标。 |
| font | Font | 设置字体。相当于指定font-family、 font-size、font-style和/或font-weight。 |
| font-family | String | 字体类型。 |
| font-size | Font Size | 字体大小。 |
| font-style | Font Style | 字体风格(倾斜）。 |
| font-weight | Font Weight | 字体的粗细。 |
| gridline-color* | Color | QTableView中网格线的颜色。如果没有指定此属性，它默认为SH_Table_GridLineColor样式提示的当前样式所指定的值。 |
| height | Length | 子部件的高度。如果希望小部件具有固定的高度，请将min-height和max-height设置为相同的值。 |
| width | Length | 子控件(在某些情况下是小部件)的宽度。 |
| icon | Url+ | 所使用的图标，用于具有图标的小部件。目前唯一支持此属性的小部件是QPushButton。 |
| icon-size | Length | 小部件中图标的宽度和高度。可以使用此属性设置以下小部件的图标大小：QCheckBox、QListView、QPushButton、QRadioButton、QTabBar、QToolBar、QToolBox、QTreeView。 |
| image* | Url+ | 在子控件的内容矩形中绘制图像。 image属性接受一个url列表或者一个svg。绘制的实际图像使用与QIcon相同的算法。图像从不放大，但在必要时总是缩小。如果指定了svg，则图像会被缩放为内容矩形的大小。警告：渲染SVG图像需要QIcon SVG插件。 |
| 隐式设置down-button的大小为spindown.png的大小 | 　 | 　 |
| image-position | Alignment | 图像位置的对齐方式 |
| lineedit-password-character* | Number | QLineEdit密码字符作为Unicode数字。如果没有指定此属性，它默认为SH_LineEdit_PasswordCharacter样式提示的当前样式所指定的值。 |
| lineedit-password-mask-delay* | Number | 在lineedit-password-character应用到可见字符之前， QLineEdit密码掩码延迟毫秒。如果未指定此属性，它默认为SH_LineEdit_PasswordMaskDelay 样式提示的当前样式所指定的值。 |
| margin | Box Lengths | 设置元素的4个外边距。相当于指定margin-top、margin-right、margin-bottom和margin-left。 |
| margin-top | Length | 上边距 |
| margin-right | Length | 右边距 |
| margin-bottom | Length | 下边距 |
| margin-left | Length | 左边距 |
| max-height | Length | 小部件或子控件（例如Item）的最大高度。 |
| max-width | Length | 小部件或子控件（例如Item）的最大宽度。 |
| min-height | Length | 小部件或子控件（例如Item）的最小高度。 |
| min-width | Length | 小部件或子控件（例如Item）的最小宽度。 |
| messagebox-text-interaction-flags* | Number | 消息框中文本的交互行为。可能的值基于Qt::TextInteractionFlags。如果未指定此属性，则默认为SH_MessageBox_TextInteractionFlags样式提示的当前样式所指定的值。 |
| opacity* | Number | 小部件的不透明度。取值范围为0(透明)~ 255(不透明)。目前，这只支持tooltips。如果未指定此属性，它默认为SH_ToolTipLabel_Opacity样式提示的当前样式指定的值。 |
| outline | 　 | 边框的轮廓 |
| outline-color | Color | 轮廓的颜色 |
| outline-offset | Length | 轮廓与小部件边界的偏移量 |
| outline-style | 　 | 指定用于绘制轮廓的模式 |
| outline-radius | 　 | 在轮廓中添加圆角 |
| outline-bottom-left-radius | Radius | 轮廓左下角的圆角 |
| outline-bottom-right-radius | Radius | 轮廓右下角的圆角 |
| outline-top-right-radius | Radius | 轮廓右上角的圆角 |
| outline-top-left-radius | Radius | 轮廓左上角的圆角 |
| padding | Box Lengths | 小部件的填充。相当于指定填充顶部、填充右侧、填充底部和填充左侧。如果未指定此属性，则默认为0。 |
| padding-top | Length | 顶部填充 |
| padding-right | Length | 右侧填充 |
| padding-bottom | Length | 底部填充 |
| padding-left | Length | 左侧填充 |
| paint-alternating-row-colors-for-empty-area | bool | QTreeView是否为空区域(即没有项目的区域)绘制交替的行色 |
| posotion | relative | absolute | 使用左、右、上和下指定的偏移量是相对坐标还是绝对坐标。如果未指定此属性，则默认为relative。 |
| selection-background-color* | Brush | 所选文本或项的背景。如果未设置此属性，则默认值是为调色板palette的Highlight角色设置的值。 |
| selection-color* | Brush | 所选文本或项的前景。如果未设置此属性，则默认值是为调色板palette的HighlightedText角色设置的值。 |
| show-decoration-selected* | Boolean | 控制QListView中的选择是覆盖整行还是仅覆盖文本的范围。如果未指定此属性，它默认为SH_ItemView_ShowDecorationSelected样式提示的当前样式指定的值。 |
| spacing* | Length | 小部件中的内部间距。 |
| subcontrol-origin* | Origin | 父元素中子控件的起始矩形。如果未指定此属性，则默认为填充。 |
| subcontrol-position* | Alignment | 子控件在subcontrol-origin指定的原点矩形内的对齐。如果未指定此属性，则默认为依赖于子控件的值。 |
| titlebar-show-tooltips-on-buttons | bool | 工具提示是否显示在窗口标题栏按钮上。 |
| widget-animation-duration* | Number | 动画应该持续多长时间(以毫秒为单位)。值等于零意味着动画将被禁用。如果没有指定此属性，它默认为SH_Widget_Animation_Duration样式提示的当前样式指定的值。 |
| text-align | Alignment | 小部件内容中的文本和图标的对齐方式。 |
| text-decoration | none underline overline line-through | 附加文本效果 |
| -qt-background-role | PaletteRole | 基于所选角色的子控件或小部件的背景色。 |
| -qt-style-features | list | 要在其上应用特定于qt的样式的CSS属性列表。注意:列表只能包含非基于像素图的属性。 |