QT界面优化：QSS-平芜编程栈

样式优先级规则：

(1)从高到低：内联样式（控件.setStyleSheet）>ID 选择器（#objectName）>通配+属性(*[属性="值"]）>类选择器（.className）>属性选择器（控件[属性="值"]）>类型选择器（QPushButton）>纯通配符（*）；

(2)也可通过!important强制提升优先级（如background-color: red !important;）

1.内联样式

//1.为单个控件设置QSS QPushButton button("Click me"); button.setStyleSheet("background-color: blue; color: white;"); // 2.设置整个应用程序的样式 a.setStyleSheet("QPushButton { background-color: red; color: yellow; }");

2.选择器的使用

2.1 ID 选择器（匹配指定`objectName`的控件）

//通过setObjectName方法为按钮设置了objectName， //然后使用 ID 选择器#myButton为该按钮设置样式。 QPushButton button("Click me"); button.setObjectName("myButton"); a.setStyleSheet("#myButton { background-color: purple; color: white; }");

2.2 类选择器（匹配所有 styleClass 为 "QGroupBox" 的控件）

//匹配 styleClass 为 "primary_btn" 的控件 */ .primary_btn { background-color: #2486ff; color: white; border: none; border-radius: 4px; } // 类选择器使用示例：给控件设置 styleClass QPushButton btn("主要按钮"); btn.setProperty("class", "primary_btn"); // 设置 styleClass 注意：先设置styleClass再加载QSS

2.3 属性选择器（用于选择具有特定属性的控件）

//1：基础：匹配 flat 属性为 true 的 QPushButton */ QPushButton[flat="true"] { background-color: transparent; border: none; } //实例 QPushButton *btn1 = new QPushButton("普通扁平按钮"); btn1->setFlat(true); // 设置 flat 属性为 true //2：多属性匹配（同时满足 flat=true 且 text="确定"） */ QPushButton[flat="true"][text="确定"] { color: #2486ff; } //实例 QPushButton *btn2 = new QPushButton("确定"); btn2->setFlat(true); // 同时满足 flat=true + text="确定" //3：模糊匹配（objectName 包含 "btn" 的 QPushButton） */ QPushButton[objectName*="btn"] { font-weight: bold; } //实例 QPushButton *btn3 = new QPushButton("名称含btn的按钮"); btn3->setObjectName("my_btn_123"); // objectName 包含 "btn"

2.4 类型选择器（用于选择指定类型的所有控件）

QPushButton { background-color: green; border: 2px solid black; }

2.5 通配符选择器（匹配所有控件或父控件下的所有子控件）

//用法 1：单独使用 → 全局匹配所有控件 /* 全局样式：所有控件生效 */ * { margin: 0px; padding: 0px; border: none; } //用法 2：结合属性选择器 → 精准匹配 “某类属性的所有控件” /* 匹配「所有 class 属性为 QGroupBox 的控件」（无论控件类型是按钮/分组框） */ *[class="QGroupBox"] { border: 1px solid blue !important; background: transparent !important; } //用法 3：作为后代选择器 → 匹配 “父控件下的所有子控件” /* 匹配 QWidget#widget 下的所有子控件（Label/Button/输入框等） */ QWidget#widget * { color: rgb(255,255,255); /* 子控件文字全部变白 */ } /* 进阶：匹配 QGroupBox 下的所有子控件，且子控件 class 为 QGroupBox */ QGroupBox *[class="QGroupBox"] { border-radius: 8px; }

2.6 伪状态选择器（用于选择处于特定状态的控件）

//鼠标悬停 QPushButton:hover { background-color: orange; } //按钮被按下 QPushButton:pressed { background-color: pink; }

3. 加载 QSS应用

//使用类选择器 先设置 styleClass 后加载QSS ui->groupBox->setProperty("class", "QGroupBox"); ui->pushButton->setProperty("class", "QGroupBox"); QFile file(":/qss.css"); if(file.open(QFile::ReadOnly)) { QString qss = QLatin1String(file.readAll()); qApp->setStyleSheet(qss); file.close(); } else { qWarning() << "无法打开样式文件：" << file.errorString(); }

//qss.css /* 匹配程序中所有控件 */ * { font-family: "Arial"; /* 所有控件的字体统一为 Arial */ } QWidget#widget , QWidget#widget_3{ background-color: rgb(38, 59, 83); } QWidget#widget *, QWidget#widget_3 * { color: rgb(255, 255, 255); } QWidget#widget_2 { background-color: rgb(240, 245, 251); } /* 类选择器：同时适配 QGroupBox 和 QPushButton */ .QGroupBox { border: 1px solid blue; /* 统一边框 */ border-radius: 5px; /* 圆角 */ margin-top: 3ex; /* 上边距（对按钮也生效，但需注意布局） */ } /* 仅对 QGroupBox 生效的标题样式（按钮无 title 子控件，自动忽略） */ .QGroupBox::title { subcontrol-origin: margin; position: relative; left: 10px; }

更多内容转载https://blog.csdn.net/2401_89899187/article/details/161731695?fromshare=blogdetail&sharetype=blogdetail&sharerId=161731695&sharerefer=PC&sharesource=weixin_63811723&sharefrom=from_link