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实例。

冲突解决规则

1. 特殊选择器优先：

   • ID选择器（如#okButton）比类型选择器（如QPushButton）更具体，因此具有更高的优先级。
   • 在这个例子中，QPushButton#okButton的样式规则会覆盖QPushButton的样式规则。
   • 因此，okButton按钮的文本颜色将是灰色（gray），而不是红色（red）。

2. 伪状态的优先级：

   • 如果样式规则中包含伪状态（如:hover、:pressed等），这些规则的优先级会更高。
   • 例如：

     QPushButton:hover { color: white; }
     QPushButton { color: red; }
     

     在这个例子中，当鼠标悬停在按钮上时，按钮的文本颜色将是白色（white），而不是红色（red）。

3. 多个伪状态的组合：

   • 伪状态可以组合使用，以实现更复杂的样式规则。
   • 例如：

     QPushButton:hover:checked { color: blue; }
     QPushButton:hover { color: white; }
     QPushButton { color: red; }
     

     在这个例子中：
     • 当按钮被选中且鼠标悬停时，文本颜色将是蓝色（blue）。
     • 当按钮未被选中但鼠标悬停时，文本颜色将是白色（white）。
     • 当按钮既没有被选中也没有鼠标悬停时，文本颜色将是红色（red）。

4. 逻辑或的使用：

   • 伪状态可以通过逗号分隔，实现逻辑或的效果。
   • 例如：

     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