Qt 样式表qss学习
语法
/* 语法结构 */
selector { attribute: value }
selector（选择器）
- selector（选择器）：指定要应用样式的控件类型或特定控件。例如：
QWidget：所有QWidget及其子类。QPushButton：所有QPushButton控件。QGroupBox：所有QGroupBox控件。#objectName：通过对象名称指定特定控件。.className：通过样式表类名指定特定控件。:pseudo-state：指定控件的伪状态（如:hover、:pressed等）。
选择器类型：
| 选择器类型 | 示例 | 说明 |
|---|---|---|
| 通用选择器 | * | 匹配所有部件 |
| 类型选择器 | QPushButton | 匹配所有QPushButton实例及其所有子类 |
| 属性选择器 | QPushButton[flat = "false"] | 匹配QPushButton的属性flat为false的实例 |
| 类选择器 | .QPushButton | 匹配所有QPushButton实例，但不包括它的子类 |
| ID选择器 | QPushButton#myButton | 匹配所有QPushButton中myButton对象的实例 |
| 后代选择器 | QDialog QPushButton | 匹配所有QPushButton实例，它们必须是QDialog的子孙部件 |
| 孩子选择器 | QDialog>QPushButton | 匹配所有QPushButton实例，它们必须是QDialog直系孩子部件 |
子控件：
对于一些复杂的部件修改样式，可能需要访问它们的子部件，如QComboBox的下拉按钮，QSpinBox的向上、向下箭头灯。用:: 访问。
| 子控件 | 描述 |
|---|---|
::add-line | 在QScrollBar中跳转下一行的按钮 |
::add-page | 在QScrollBar中滑动条和add-line之间的区域 |
::branch | 在QTreeView中的分支指示器 |
::chunk | 在QProgressBar中的进度块 |
::close-button | 在QDockWidget或QTabBar选项卡的关闭按钮 |
::corner | 在QAbstractScrollArea中两个滚动条之间的角落 |
::down-arrow | 在QComboBox、QHeaderView（排序指示器）、QScrollBar或QSpinBox的向下箭头 |
::down-button | 在QScrollBar或QSpinBox中的向下按钮 |
::drop-down | 在QComboBox中的下拉框 |
::float-button | 在QDockWidget中的浮动按钮 |
::groove | 在QSlider中的滑动槽 |
::indicator | 在QAbstractItemView、QCheckBox、QRadioButton、可选中的菜单项或可选中的QGroupBox中的指示器 |
::handle | 在QScrollBar、QSplitter和QSlider中的操作条（滑动条） |
::icon | 在QAbstractItemView或QMenu中的图标 |
::item | 在QAbstractItemView、QMenuBar、QMenu或QStatusBar中的一项 |
::left-arrow | 在QScrollBar中的向左箭头 |
::left-corner | 在QTabWidget中的左上角 |
::menu-arrow | 带有菜单的QToolButton中的箭头 |
::menu-button | 在QToolButton中的菜单按钮 |
::menu-indicator | 在QPushButton中的菜单指示器 |
::right-arrow | 在QMenu或QScrollBar中的向右箭头 |
::pane | 在QTabWidget中的边或框 |
::right-corner | 在QTabWidget中的右上角 |
::scroller | 在QMenu或QTabBar中的滚动条 |
::section | 在QHeaderView中的区块 |
::separator | 在QMenu或QMainWindow中分隔条 |
::sub-line | 在QScrollBar中跳转上一行的按钮 |
::sub-page | 在QScrollBar中滑动条和sub-line之间的区域 |
::tab | 在QTabBar或QToolBox中选项卡 |
::tab-bar | 在QTabWidget中的选项卡栏 |
::tear | 在QTabBar中的tear指示器 |
::tearoff | 在QMenu中的tear-off指示器 |
::text | 在QAbstractItemView中的文本 |
::title | 在QGroupBox或QDockWidget中的标题栏 |
::up-arrow | 在QComboBox、QHeaderView（排序指示器）、QScrollBar或QSpinBox的向上箭头 |
::up-button | 在QScrollBar或QSpinBox中的向上按钮 |
伪状态：
选择器可以使用状态来限制在部件的指定状态上的应用。伪状态在选择器之后，用冒号:隔离。如：鼠标悬停在按钮上时其按钮的颜色为白色QPushButton:hover{color:white}。
| 伪状态 | 描述 |
|---|---|
: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的默认状态。例如，一个默认的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 | 小部件是一个窗口（例如，一个顶层小部件） |
attribute（属性）
官方文档
第三方教程
- attribute（属性）：定义控件的外观特性，如颜色、边框、背景等。
color：文本颜色。background-color：背景颜色。border：边框样式。padding：内边距。margin：外边距。font：字体样式。selection-color：选中时的文本颜色。selection-background-color：选中时的背景颜色。
value（值）
- value（值）：与属性对应的值，可以是颜色、尺寸、字体等。
支持BOX MODEL
margin、border-width和padding属性都默认为0。在这种情况下，所有四个矩形(边距、边框、填充和内容)都完全重合。
冲突
样式冲突解决原则：
在Qt样式表（QSS）中，当多个样式规则对同一个属性指定不同的值时，就会产生冲突。Qt通过一套优先级规则来解决这些冲突，确保最终的样式是明确且一致的。
示例
QPushButton#okButton { color: gray; }
QPushButton { color: red; }
在这个例子中：
QPushButton#okButton是一个ID选择器，它针对的是具有特定ID（okButton）的QPushButton实例。QPushButton是一个类型选择器，它针对的是所有QPushButton实例。
冲突解决规则
-
特殊选择器优先：
- ID选择器（如
#okButton）比类型选择器（如QPushButton）更具体，因此具有更高的优先级。 - 在这个例子中，
QPushButton#okButton的样式规则会覆盖QPushButton的样式规则。 - 因此，
okButton按钮的文本颜色将是灰色（gray），而不是红色（red）。
- ID选择器（如
-
伪状态的优先级：
- 如果样式规则中包含伪状态（如
:hover、:pressed等），这些规则的优先级会更高。 - 例如：
在这个例子中，当鼠标悬停在按钮上时，按钮的文本颜色将是白色（QPushButton:hover { color: white; } QPushButton { color: red; }white），而不是红色（red）。
- 如果样式规则中包含伪状态（如
-
多个伪状态的组合：
- 伪状态可以组合使用，以实现更复杂的样式规则。
- 例如：
在这个例子中：QPushButton:hover:checked { color: blue; } QPushButton:hover { color: white; } QPushButton { color: red; }- 当按钮被选中且鼠标悬停时，文本颜色将是蓝色（
blue）。 - 当按钮未被选中但鼠标悬停时，文本颜色将是白色（
white）。 - 当按钮既没有被选中也没有鼠标悬停时，文本颜色将是红色（
red）。
- 当按钮被选中且鼠标悬停时，文本颜色将是蓝色（
-
逻辑或的使用：
- 伪状态可以通过逗号分隔，实现逻辑或的效果。
- 例如：
在这个例子中：QPushButton:hover, QPushButton:checked { color: white; } QPushButton { color: red; }- 当按钮被鼠标悬停或被选中时，文本颜色将是白色（
white）。 - 当按钮既没有被鼠标悬停也没有被选中时，文本颜色将是红色（
red）。
- 当按钮被鼠标悬停或被选中时，文本颜色将是白色（
qss 示例
qss示例
示例：
1. 基本样式
QWidget {background-color: rgb(255, 255, 255); /* 白色背景 */color: rgb(0, 0, 0); /* 黑色文本 */font: 14px "Arial"; /* 字体大小和字体 */
}
2. 指定控件样式
QPushButton {background-color: rgb(255, 0, 0); /* 红色背景 */color: rgb(255, 255, 255); /* 白色文本 */border: 2px solid rgb(0, 0, 0); /* 黑色边框 */border-radius: 10px; /* 圆角边框 */padding: 5px; /* 内边距 */
}
3. 使用对象名称
QWidget#filemanager_memeryArea {background-color: rgb(228, 228, 228); /* 灰色背景 */border-radius: 5px; /* 圆角边框 */
}
4. 伪状态
QPushButton:hover {background-color: rgb(255, 165, 0); /* 鼠标悬停时的背景色 */
}QPushButton:pressed {background-color: rgb(0, 255, 0); /* 按下时的背景色 */
}
5. 子控件样式
QGroupBox::title {subcontrol-origin: margin;subcontrol-position: top center;padding: 0 3px;background-color: rgb(200, 200, 200);
}
6. 组合选择器
QLineEdit, QComboBox {background-color: rgb(255, 255, 255); /* 白色背景 */border: 1px solid rgb(0, 0, 0); /* 黑色边框 */
}
7. 嵌套控件
QDialog QWidget {background-color: rgb(240, 240, 240); /* 对话框中的所有QWidget */
}
使用方式：
#include <QApplication>
#include <QFile>
#include <QTextStream>
#include <QDebug>int main(int argc, char *argv[]) {QApplication app(argc, argv);QString styleSheetPath = ":/qdarkstyle/dark/darkstyle.qss"; // 替换为你的样式表路径QFile f(styleSheetPath);if (!f.exists()) {qDebug() << "Unable to set stylesheet, file not found:" << styleSheetPath;} else {f.open(QFile::ReadOnly | QFile::Text);QTextStream ts(&f); // 流式加载app.setStyleSheet(ts.readAll()); // 这里应用}QWidget window;window.setWindowTitle("Test Window");window.resize(400, 300);window.show();return app.exec();
}
参考1