Qt样式表(QSS)语法详解与实战应用

1. QSS 基础：语法与选择器体系

Qt Style Sheets（QSS）作为Qt框架中的样式表系统，其语法高度兼容CSS2规范，但针对Qt控件特性进行了专门扩展。理解QSS的基础语法和选择器体系是掌握Qt界面美化的第一步。

1.1 基本语法结构解析

QSS的基本语法单元由选择器（Selector）和声明块（Declaration Block）组成，其标准格式如下：

css复制Selector {
    property1: value1;
    property2: value2;
    /* 注释与CSS相同 */
}

与Web开发中的CSS相比，QSS有以下关键区别点：

• 属性名前缀：QSS使用qproperty-前缀访问Qt特有的属性（如qproperty-alignment）
• 单位系统：支持px（像素）、pt（点）、em（字体高度）等单位，但不支持rem、vw/vh等相对单位
• 颜色表示：除常规的十六进制和RGB外，支持Qt特有的颜色名称（如transparent）

实际应用示例：

css复制QPushButton {
    background-color: #4CAF50;
    border: 2px solid #2E7D32;
    border-radius: 5px;
    padding: 8px 16px;
    qproperty-iconSize: 16px 16px;
}

1.2 核心选择器类型详解

QSS提供了丰富的选择器类型，用于精确匹配目标控件：

类型选择器（Type Selector）

匹配特定类的所有实例：

css复制QPushButton { color: white; }

类选择器（Class Selector）

通过QObject::setProperty()设置的类名：

cpp复制// C++代码
button->setProperty("class", "urgent");

css复制QPushButton.urgent { background: red; }

ID选择器（ID Selector）

匹配setObjectName()设置的唯一标识：

cpp复制button->setObjectName("loginBtn");

css复制#loginBtn { font-weight: bold; }

属性选择器（Attribute Selector）

根据控件属性值匹配：

css复制QPushButton[flat="true"] { border: none; }

子控件选择器（Sub-control Selector）

针对复合控件的内部部件：

css复制QComboBox::drop-down {
    width: 20px;
    background: transparent;
}

伪状态选择器（Pseudo-state Selector）

响应交互状态变化：

css复制QCheckBox:hover { color: blue; }
QRadioButton:checked { background: green; }

选择器优先级规则（从高到低）：

1. !important标记
2. 内联样式（直接setStyleSheet）
3. ID选择器
4. 类选择器/属性选择器/伪类
5. 类型选择器
6. 继承的样式

2. QSS 盒子模型：理解控件尺寸与布局的核心

2.1 盒模型四层结构剖析

Qt的盒子模型与Web CSS盒模型概念相似，但存在关键实现差异：

| 层级 | QSS属性示例 |