QSS 的选择器

article/2025/7/13 8:32:23

1. 样式表规则

    样式表包含了一系列的样式规则,每个样式规则由选择器(selector)和声明(declaration)组成。
    选择器:指定了受该规则影响的部件。
    声明:指定了这个部件上要设置的属性。

2. 选择器类型

选择器示例说明
  通用选择器   *匹配所有部件
类型选择器QPushButton匹配所有的 QPushButton,包含继承QPushButton实现的子类
类选择器.QPushButton匹配所有的 QPushButton ,不包含继承QPushButton实现的子类
属性选择器QPushButton[checked=true]匹配所有 QPushButton 中设置了 checked=true 的部件
ID选择器QPushButton#myBtn匹配所有 QPushButton 中对象名为 myBtn 的部件
后代选择器QDialog QPushButton匹配QDialog 中的所有 QPushButton,包括子孙部件
子代选择器QDialog > QPushButton匹配QDialog 中的直接子部件 QPushButton,不包括子孙部件
并集选择器QPushButton QLineEdit同时匹配所有的 QPushButton 和 QLineEdit 部件

3. 子控件

    对复杂部件的子控件进行样式设置,例如 QComboBox 的下拉框, QTreeView 的 branch,QSpinBox 的向上向下箭头等进行单独样式设置。
4. 伪状态

    伪状态是指像 QPushButton 的鼠标悬浮,鼠标按压等状态。选择器可以包含伪状态来限制规则在部件的指定状态上应用。伪状态出现在选择器之后,用冒号隔开。

5.具体示例

5.1 通用选择器

  功能:设置整个系统部件的字体为 14px

	*{font-size: 14px;}

5.2 类型选择器

  功能:设置所有 QPushButton 的样式,字体颜色为红色,边框为绿色。所有 QPushButton 及其子类都会应用此样式。

	QPushButton{color: red;border: 1px solid green;}

  效果:

在这里插入图片描述

说明: 其中 自定义btn 是通过继承 QPushButton实现的子类。

5.3 类选择器

  功能:设置所有 QPushButton 的样式,字体颜色为红色,边框为绿色。只有 QPushButton类型部件会应用此样式,继承自 QPushButton 实现的子类按钮不会应用此样式。

  示例:

	.QPushButton{color: red;border: 1px solid green;}

  效果:

在这里插入图片描述

说明:
  1)类选择器比类型选择器多了一个点(.)。
  2)其中 自定义btn 是通过继承QPushButton实现的子类。可以看到该按钮并没有应用设置的样式。

5.5 属性选择器

  示例:

QPushButton[checked=true]{ /*属性 checked 为 true 的 QPushButton 应用此样式*/color: red;border: 1px solid green;
}QPushButton[flat=true]{/*属性 flat 为 true 的 QPushButton 应用此样式*/color: green;border: 1px solid blue;
}QPushButton[whatsThis="appBtn"]{/*属性 whatsThis 为 appBtn 的QPushButton应用此样式*/color: green;border: 1px solid red;
}QPushButton[mprop="testpro"]{/*自定义属性 mprop 为 testpro 的QPushButton应用此样式*/color: pink;border: 1px solid yellow;
}

  效果:

在这里插入图片描述

说明: 1)第一个按钮在 ui 设计器的属性编辑器中勾选了 checkable 和 checked
在这里插入图片描述
2) 第一个按钮在 ui 设计器的属性编辑器中勾选了 flat
在这里插入图片描述
3)第三个按钮是通过调用函数 setWhatsThis() 设置了 whatsThis 属性。
对于通过UI设计器添加的部件,也可以直接在【属性编辑器】中设置【whatsThis】 的值 在这里插入图片描述&nbsp> 4)可以使用 setProperty() 为部件设置属性,然后在样式表中使用该属性。如示例中的 btn3 ,使用代码 ui->btn3->setProperty(“mprop”, “testpro”); 进行属性设置,之后在属性选择器中就可以使用该属性了。

5.5 ID 选择器
 格式:
  1) 类型名#ID: 指定了类型,则只有对应的类型的 objectName 为 appBtn 会应用样式。
  2) #ID:此时未指定类型时,则只要部件的 objectName 为 appBtn都会应用设置的样式。
 示例一:将 QLineEdit 和 QPushButton 的部件的 objectName 都设置为 appBtn ,且使用 #appBtn 进行样式设置,则两个部件都会应用相同的样式。

在这里插入图片描述

 示例二:将 QLineEdit 和 QPushButton 的部件的 objectName 都设置为 appBtn,且使用 QPushButton#appBtn 进行样式设置,则只有 QPushButton 部件才会应用此样式。

在这里插入图片描述

5.6 后代选择器

 场景:
 新建一个 QDialog, 在其上创建一个 QPushButton 和 一个 QGroupBox,然后在 QGroupBox 中又创建了两个 QPushButton 。

在这里插入图片描述

 示例:

QDialog  QPushButton{color: red;border: 1px solid green;
}

 效果:QDialog 以及 QGroupBox 中的两个按钮都设置了对应的样式。

在这里插入图片描述
5.7 子代选择器

 示例:

	QDialog > QPushButton{color: red;border: 1px solid green;}

 效果:只有 QDialog 上创建的 dlgBtn1 设置了对应的样式,QGroupBox 中的两个按钮没有设置。

在这里插入图片描述
5.8 并集选择器
 功能: 同时为不同类型的部件设置样式
 示例:

	QPushButton, QLineEdit{color: red;border: 1px solid green;}

效果:

 QLineEdit 和 QPushButton 同时应用了设置的样式。

在这里插入图片描述

5.9 子控件

 示例:对 QComboBox 的下拉框进行样式设置

	QComboBox::drop-down{border:1px solid transparent;width: 16px;padding:6px;border-radius:4px;}

 效果:

在这里插入图片描述

5.10 伪状态

 选择器可以包含伪状态来限制规则在部件的指定状态上应用。伪状态出现在选择器之后,用冒号隔开。

 伪状态是指像 QPushButton 的鼠标悬浮,鼠标按压等状态。

	QPushButton:hover{/*鼠标悬浮在按钮上是,边框变为蓝色*/border: 1px solid blue;}

 1)伪状态可以用感叹号来表示否定。

	QPushButton:!hover{/*设置非悬浮状态样式*/color: red;border: 1px solid green;}

 2)伪状态可以多个连用,用来表示逻辑与的操作。

	QPushButton:hover:checked{/*鼠标悬浮时且设置为checked的按钮应用此样式*/color: yellow;border: 1px solid blue;}

 3)可以用逗号隔开,同时设置多个伪状态,用来表示逻辑或的操作。

	QPushButton:hover, QPushButton:checked{/*鼠标悬浮时或设置为checked的按钮应用此样式*/color: yellow;border: 1px solid blue;}

 4)伪状态可以和子控件联合使用。

	QComboBox::drop-down:hover{/*鼠标放到 QComboBox 的下拉框时,下拉框颜色变为红色*/border:1px solid red;}

6. 冲突解决
 当几个样式规则对相同的属性指定了不同的值时,就产生了冲突。
 解决冲突的原则是:
 1) 特殊选择器优先。

	QPushButton[whatsThis="appBtn"]{color: red;border: 1px solid green;}QPushButton{color: yello;border: 1px solid blue;}

 效果:

在这里插入图片描述

说明: 设置了 whatsThis=“appBtn” 的按钮设置为红色字体,绿色边框,其他按钮设置为 黄色字体,蓝色边框。

 2)有伪状态的比没有伪状态的优先。
 3)如果两个选择器器的特殊性相同,则后面出现的比前面的优先。如下:会使用后面设置的蓝色边框,黄色字体的样式。

	QPushButton{ /*红色字体,绿色边框*/color: red;border: 1px solid green;}QPushButton{/*黄色字体,蓝色边框*/color: yello;border: 1px solid blue;}

 4)样式表可以设置 QApplication、父部件或子部件上。部件有效的样式表是通过部件祖先的样式表和QApplication的样式表合并得到的。当发生冲突时,部件自己的样式表优先于任何继承的样式表,父部件的样式表优先于祖先的样式表。

7. 其他说明
 使用 Qt 样式表时,部件并不会自动从父部件继承字体和颜色设置。


http://www.hkcw.cn/article/hrBuyRnvyd.shtml

相关文章

Python 训练营打卡 Day 30-模块和库的导入

模块和库的导入 1.1标准导入 import mathprint("方式1: 使用 import math") print(f"圆周率π的值: {math.pi}") print(f"2的平方根: {math.sqrt(2)}\n") 1.2从库中导入特定项 from math import pi, sqrtprint("方式2:使用 f…

ToolsSet之:渐变色生成工具

ToolsSet是微软商店中的一款包含数十种实用工具数百种细分功能的工具集合应用,应用基本功能介绍可以查看以下文章: Windows应用ToolsSet介绍https://blog.csdn.net/BinField/article/details/145898264 ToolsSet中Media菜单下的Gradient Color工具是一…

智能守护电网安全:探秘输电线路测温装置的科技力量

在现代电力网络的庞大版图中,输电线路如同一条条 “电力血管”,日夜不息地输送着能量。然而,随着电网负荷不断增加,长期暴露在户外的线路,其线夹与导线在电流热效应影响下,极易出现温度异常。每年因线路过热…

云服务器如何自动更新系统并保持安全?

云服务器自动更新系统是保障安全、修补漏洞的重要措施。下面是常见 Linux 系统(如 Ubuntu、Debian、CentOS)和 Windows 服务器自动更新的做法和建议: 1. Linux 云服务器自动更新及安全维护 Ubuntu / Debian 系统 手动更新命令 sudo apt up…

Spring Advisor增强规则实现原理介绍

Spring Advisor增强规则实现原理介绍 一、什么是 Advisor?1. Advisor 的定义与本质接口定义: 2. Advisor 的核心作用统一封装切点与通知构建拦截器链的基础实现增强逻辑的灵活组合 二. Sprin当中的实现逻辑1 Advisor 接口定义2 PointcutAdvisor 接口定义…

vscode实时预览编辑markdown

vscode实时预览编辑markdown 点击vsode界面,实现快捷键如下: 按下快捷键 CtrlShiftV(Windows/Linux)或 CommandShiftV(Mac)即可在侧边栏打开 Markdown 预览。 效果如下:

为什么建立 TCP 连接时,初始序列号不固定?

主要原因有两个方面: 很大程度上避免历史报文被下一个相同四元组的 TCP 连接接收问题(主要方面)防止黑客伪造相同序列号的 TCP 报文被接收 接下来,详细说说第一点 假设每次建立 TCP 连接时,客户端和服务端的初始序列…

偏序集、哈斯图、Dilworth

标题 偏序哈斯图Dilworth最少的不上升子序列与最长上升子序列P1020 偏序 偏序关系满足&#xff1a;自反性、反对称性和传递性 便于理解引入哈斯图 哈斯图 对于元素 x&#xff0c;如果 x<y 且不存在 z 使得 x<z<y&#xff0c;那么 y 就是 x 的覆盖元素&#xff0c;在…

企业知识库问答系统避坑指南:检索优化与生成一致性解决方案

本文较长&#xff0c;建议点赞收藏&#xff0c;以免遗失。更多AI大模型应用开发学习视频及资料&#xff0c;尽在聚客AI学院。 一、智能问答系统架构设计 1.1 整体系统架构 graph LR A[用户输入] --> B(前端界面) B --> C{查询类型} C -->|文本| D[文本处理模块] C -…

2025年全国青少年信息素养大赛复赛C++算法创意实践挑战赛真题模拟强化训练(3)

2025年全国青少年信息素养大赛复赛C算法创意实践挑战赛真题模拟强化训练&#xff08;3&#xff09; 四位数密码 【题目描述】 情报员使用4位数字来传递信息&#xff0c;同时为了防止信息泄露&#xff0c;需要将数字进行加密。数据加密的规则是: 每个数字都进行如下处理&…

爬虫知识零基础到入门-数据解析-css, xpath(三)

数据解析 前言一、常见数据类型1.结构化数据2.半结构化数据3.非结构化数据二、HTML概述1.HTML骨架格式2.HTML标签关系三、CSS选择器1.标签选择器2.类选择器3.ID选择器4.组合选择器5.后代选择器6.伪类选择器7.属性提取器8.小结四、xpath节点提取1.什么是xpath2.认识xml1.html和x…

56、Ocelot 概述

Ocelot 是一个基于 .NET Core 开发的开源 API 网关&#xff0c;主要用于微服务架构中&#xff0c;为多个后端服务提供统一的访问入口。它通过集中化管理请求路由、认证、限流、负载均衡等功能&#xff0c;简化了客户端与后端服务之间的交互&#xff0c;同时增强了系统的安全性和…

使用el-input数字校验,输入汉字之后校验取消不掉

先说说复现方式 本来input是只能输入数字的&#xff0c;然后你不小心输入了汉字&#xff0c;触发校验了&#xff0c;然后这时候&#xff0c;你发现校验取消不掉了 就这样了 咋办啊&#xff0c;你一看校验没错啊&#xff0c;各种number啥的也写了,发现没问题啊 <el-inputv…

Oracle数据库性能优化的最佳实践

原创&#xff1a;厦门微思网络 以下是 Oracle 数据库性能优化的最佳实践&#xff0c;涵盖设计、SQL 优化、索引管理、系统配置等关键维度&#xff0c;帮助提升数据库响应速度和稳定性&#xff1a; 一、SQL 语句优化 1. 避免全表扫描&#xff08;Full Table Scan&#xff09;…

AR-HUD 光波导方案优化难题待解?OAS 光学软件来破局

波导-HUD系统案例分析 简介 光波导技术凭借其平板超薄结构和强大的二维扩展能力&#xff0c;在解决AR-HUD问题方面展现出显著优势。一方面&#xff0c;其独特的结构特性能够大幅减小对光机体积的需求&#xff0c;成为 HUD 未来发展的重要技术方向&#xff1b;另一方面&#xf…

003图书个性化推荐系统技术剖析:打造智能借阅新体验

图书个性化推荐系统技术剖析&#xff1a;打造智能借阅新体验 在知识经济时代&#xff0c;图书资源日益丰富&#xff0c;如何帮助用户快速找到心仪的图书成为关键。图书个性化推荐系统应运而生&#xff0c;它集成图书信息管理、图书预约等多个核心模块&#xff0c;通过前台展示…

CUDA 实践:隐式 GEMM 卷积 | CUDA

文章写的通俗易懂&#xff0c;根据学习和理解&#xff0c;这里画图更又利于理解。 img2col GEMM 是一种比较常用的卷积优化方法&#xff0c;因为这样可以利用到性能已经优化得比较好的 BLAS 库。早期的一些深度学习框架&#xff08;如 Caffe&#xff09;就是用了这种方式。但…

Linux线程池(下)(34)

文章目录 前言一、v3版本二、单例模式概念特点简单实现 三、其余问题STL线程安全问题智能指针线程安全问题其他锁的概念 总结 前言 加油&#xff01;&#xff01;&#xff01; 一、v3版本 「优化版」&#xff1a;从任务队列入手&#xff0c;引入 「生产者消费者模型」&#xff…

Vert.x学习笔记-EventLoop工作原理

Vert.x学习笔记 Vert.x Event Loop 的工作原理1. 核心设计理念2. 事件循环的执行流程3. 线程绑定与上下文4. 协作与任务委托5. 性能优化与注意事项6. 关键特性总结 单线程事件循环&#xff08;Event Loop&#xff09;1. 什么是单线程事件循环&#xff1f;2. 用生活场景类比3. 单…

基于 HT for Web 的轻量化 3D 数字孪生数据中心解决方案

一、技术架构&#xff1a;HT for Web 的核心能力 图扑软件自主研发的 HT for Web 是基于 HTML5 的 2D/3D 可视化引擎&#xff0c;核心技术特性包括&#xff1a; 跨平台渲染&#xff1a;采用 WebGL 技术&#xff0c;支持 PC、移动端浏览器直接访问&#xff0c;兼容主流操作系统…