Qt QSS使用指南

Qt QSS（Qt Style Sheets）是一种非常实用的机制，它允许你像使用CSS美化网页一样，轻松地为Qt应用程序定制界面风格。它基于CSS语法，但针对Qt控件做了简化，上手很快。

下面为你梳理了QSS的核心用法，你可以通过目录快速跳转到感兴趣的部分。

📝 QSS核心语法速览

QSS的语法结构非常简单，由选择器 和声明块组成：

css 复制代码

选择器 {
    属性名: 属性值;
}

例如，将界面上所有QPushButton的文字颜色设为红色：

css 复制代码

QPushButton { color: red; }

⚙️ 四种设置方式

在Qt中，有四种常见的方式可以应用QSS，你可以根据场景灵活选择：

设置方式	核心代码	特点
指定控件样式	`button->setStyleSheet("QPushButton { color: red; }");`	仅对当前控件生效，且会覆盖从父控件或全局继承的冲突样式。
全局样式	`a.setStyleSheet("QPushButton { color: red; }");`	在`main()`函数中通过`QApplication`对象设置，作用于整个程序，所有相关控件都会受影响，便于统一风格。
从文件加载	`QFile file(":/style.qss");` `a.setStyleSheet(file.readAll());`	将样式代码写在独立的`.qss`文件中，再通过程序读取。这是最推荐的解耦方式，便于维护和更换主题。通常将qss文件放入资源文件（.qrc）中管理。
Qt Designer编辑	在UI设计器中右键控件 -> "改变样式表"	可以实时预览样式效果，样式内容会保存在`.ui`文件中。适合快速调试和简单的样式调整。

🔍 选择器详解

选择器决定了样式规则会应用到哪些控件上。QSS支持多种选择器，以下是几种最常用的-1 -3 -9：

类型	语法示例	说明
类型选择器	`QPushButton`	匹配所有`QPushButton`控件及其子类（如`MyButton`）。
类选择器	`.QPushButton`	匹配所有`QPushButton`控件，但不包括其子类。
ID选择器	`#okButton`	匹配`objectName`为`okButton`的特定控件，优先级通常最高。
后代选择器	`QDialog QPushButton`	匹配`QDialog`内部的所有`QPushButton`（包括孙子、重孙等）。
子选择器	`QDialog > QPushButton`	匹配`QDialog`的直接子`QPushButton`，不包含更深的嵌套。
并集选择器	`QPushButton, QLineEdit`	同时为多种不同类型的控件应用相同的样式。
伪类选择器	`QPushButton:hover`	匹配处于特定状态的控件，如鼠标悬停(`:hover`)、按下(`:pressed`)、选中(`:checked`)等。
子控件选择器	`QComboBox::drop-down`	匹配复杂控件的子部分，如组合框的下拉按钮、进度条的进度块(`QProgressBar::chunk`)。

🎨 常用样式属性与盒模型

你可以设置的样式属性非常丰富，主要围绕盒模型 展开-2。

盒模型 ：可以将每个控件想象成一个盒子，由内到外包含内容(content) 、内边距(padding) 、边框(border) 和外边距(margin)。
- 常用属性：
  - color、background-color：文本和背景颜色。
  - font-size、font-family：字体大小和类型。
  - border、border-radius：边框样式、宽度、颜色，以及圆角。
  - padding、margin：内边距和外边距。
  - image：为控件设置背景图片。

💡 关键使用技巧

优先级规则 ：如果同一个控件的同一个属性在多个地方被定义，遵循 "局部优先" 的原则。即：指定控件样式 > 父控件样式 > 全局样式。另外，ID选择器 的优先级通常高于类型选择器。
继承性 ：与CSS不同，QSS中字体和颜色等样式默认不会从父控件自动继承给子控件 。如果想让父控件下的所有子控件都应用同一种文字颜色，需要使用后代选择器显式指定，例如 QGroupBox * { color: red; }。
动态属性：你可以为控件设置自定义的动态属性，并在QSS中使用属性选择器来应用样式，实现更灵活的样式切换。

🚀 综合示例

下面是一个结合了多种概念的按钮样式，它实现了默认、悬停、按下三种不同状态的效果：

css 复制代码

QPushButton {
    /* 基础样式 */
    color: white;
    background-color: #27a9e3; /* 蓝色背景 */
    border: 1px solid #1e7fa3;
    border-radius: 5px;        /* 圆角 */
    padding: 5px 10px;
}

QPushButton:hover {
    /* 鼠标悬停时变亮 */
    background-color: #48b9e9;
}

QPushButton:pressed {
    /* 鼠标按下时颜色加深，并产生一点偏移，模拟按下效果 */
    color: #e0e0e0;
    background-color: #1b7e9f;
    padding-left: 11px;         /* 简单模拟按下偏移 */
    padding-top: 6px;
}