Qt进阶开发：QSS常用的语法介绍和使用

原创

已于 2025-05-01 21:45:12 修改 · 1.3k 阅读

18 ·

CC 4.0 BY-SA版权

文章标签：

#qt

于 2025-05-01 21:41:21 首次发布

文章目录

一、什么是QSS?

在 Qt 中，QSS（Qt Style Sheets）是一种用于美化界面外观的技术，它的语法类似于 CSS（层叠样式表），但针对的是 Qt 的控件。QSS 可以让你在不改动控件代码的前提下，对 Qt 界面中的控件进行灵活、统一的样式定制。

QSS 可以控制 Qt 应用中的以下方面：

控件的背景颜色、文字颜色、边框、圆角、字体等；

控件的状态（如 hover、pressed、disabled）样式；

自定义控件的外观，打造现代化 UI；

控件的子控件样式（如 QScrollBar 的 handle、add-line、sub-line 等）。

二、QSS的基本语法

QSS 的语法基本与 CSS 相似，基本格式如下：

QPushButton {
   
   
    background-color: #3498db;
    color: white;
    border: 1px solid #2980b9;
    border-radius: 5px;
    padding: 5px 10px;
}

QPushButton:hover {
   
   
    background-color: #2980b9;
}

QPushButton:pressed {
   
   
    background-color: #1abc9c;
}

上述 QSS 应用于 QPushButton，定义了其正常、鼠标悬浮、按下时的不同状态样式。

三、QSS 的使用方式

3.1 在代码中设置 QSS

QPushButton *btn = new QPushButton("Click me");
btn->setStyleSheet("background-color: red; color: white; border-radius: 5px;");

3.2 加载外部 QSS 文件

QFile file(":/styles/my_style.qss");
if (file.open(QFile::ReadOnly)) {
   
   
    QString styleSheet = QLatin1String(file.readAll());
    qApp->setStyleSheet(styleSheet);  // 设置应用级样式
}

四、QSS中选择器的介绍和使用

4.1 Type Selector（类型选择器）

类型选择器是 QSS（Qt Style Sheets）中最基础也最常用的一类选择器，用于根据控件的类名（类型）来匹配并设置样式。它的语法非常简单，直接写控件的类型名即可。

语法格式：

QWidgetType {
   
   
    /* 样式定义 */
}

其中 QWidgetType 是 Qt 控件的类名，例如：QPushButton, QLabel, QLineEdit 等。

示例一：设置所有按钮样式

QPushButton {
   
   
    background-color: #3498db;
    color: white;
    border-radius: 5px;
    padding: 6px 12px;
}

这个样式会应用到程序中所有的 QPushButton 控件上。

示例二：统一设置所有标签文字颜色

QLabel {
   
   
    color: #2c3e50;
    font-weight: bold;
}

无论标签显示在哪个位置，这条规则都会生效。

示例三：组合状态伪类

QPushButton:hover {
   
   
    background-color: #2980b9;
}

QPushButton:pressed {
   
   
    background-color: #1abc9c;
}

用于细化交互状态下的样式。

4.2 ID Selector（ID 选择器）

ID 选择器（又称对象名选择器）是 Qt Style Sheets（QSS）中用于精确匹配某个特定控件的选择器。通过设置控件的 objectName，可以为这个控件单独定义样式，而不会影响同类其他控件。

4.2.1 仅使用 ID（常见写法）

语法格式：

#objectName {
     
     
    /* 样式定义 */
}

# 表示按控件的 objectName 匹配；

objectName 是通过 setObjectName(“name”) 设置的标识。

使用步骤：
在 QSS 中使用 ID Selector

#confirmBtn {
     
     
    background-color: #27ae60;
    color: white;
    border-radius: 4px;
    padding: 6px 12px;
}

设置控件的 objectName（C++ 中）

QPushButton *btn = new QPushButton("确定");
btn->setObjectName("confirmBtn");

这个样式只会应用到 objectName 为 confirmBtn 的按钮。

示例：多个按钮不同样式

#okButton {
     
     
    background-color: #2ecc71;
}

#cancelButton {
     
     
    background-color: #e74c3c;
}

QPushButton *okBtn = new QPushButton("OK");
okBtn->setObjectName("okButton");

QPushButton *cancelBtn = new QPushButton("Cancel");
cancelBtn->setObjectName("cancelButton");

结合状态伪类使用：

#okButton:hover {
     
     
    background-color: #27ae60;
}

#cancelButton:pressed {
     
     
    background-color: #c0392b;
}

4.2. 2 类型 + ID（更精确匹配）

语法格式：

QWidgetType#objectName {
   
   
    /* 样式定义 */
}

表示只有 QWidgetType 类型，并且 objectName == “myButton” 才会应用此样式。

带类型限定的 ID 选择器：

/* 主窗口背景 */
QMainWindow {
   
   
    background-color: #f0f2f5;
}

/* 标题标签 */
QLabel#titleLabel {
   
   
    font-size: 20px;
    font-weight: bold;
    color: #2c3e50;
    margin-bottom: 12px;
}

/* 输入框：搜索框 */
QLineEdit#searchInput {
   
   
    background-color: white;
    border: 1px solid #dcdfe6;
    border-radius: 4px;
    padding: 6px 10px;
}

/* 确认按钮 */
QPushButton#confirmBtn {
   
   
    background-color: #409EFF;
    color: white;
    border-radius: 4px;
    padding: 6px 16px;
}

QPushButton#confirmBtn:hover {
   
   
    background-color: #