Qss样式表语法

QSS样式表语法

更多精彩内容
👉个人内容分类汇总 👈
👉QSS样式学习 👈

文章目录

  • QSS样式表语法
    • @[toc]
  • 概述
  • 一、样式规则
  • 二、选择器类型
  • 三、子控件
  • 四、伪状态
  • 五、样式表冲突解决
  • 六、级联
  • 七、继承
  • 八、命名空间中的控件

概述

  • Qt样式表的概念，术语和语法在很大程度上受到HTML层叠样式表 （CSS）的启发，Qt样式表遵循CSS2规范；
  • 如果Qt样式表与设置小部件外观的函数（如QWidget::setFont() 或QTreeWidgetItem::setBackground() ）用于同一小部件，则如果设置冲突，样式表将优先；
  • 使用QApplication::setStyleSheet()在整个应用程序上设置；
  • 使用QWidget::setStyleSheet()在特定小部件（及其子组件）上设置。

一、样式规则

样式表由一系列样式规则组成。样式规则由选择器和以及一条或多条声明组成。

  • 选择器： 指定哪些小部件受规则影响；
  • 声明： 指定应在小组件上设置哪些属性，每条声明由一个属性和一个值组成，声明总是以分号 ; 结束，声明总以大括号 {} 括起来。

例如：

在这里插入图片描述

Qt 样式表通常不区分大小写，例如：color、Color、COLOR；但是类名、对象名、 Qt 属性名区分大小写。

可以为同一声明指定多个选择器，使用逗号 分隔选择器。例如：

QPushButton, QLineEdit, QComboBox { color: red }

/* 上面的语法等效于 */
QPushButton { color: red }
QLineEdit { color: red }
QComboBox { color: red }

二、选择器类型

Qt样式表支持CSS2中定义的所有选择器。

  1. 通用选择器

    • 示例：*；
    • 解释：匹配所有控件。

  2. 类型选择器

    • 示例：QPushButton ，控件类型；
    • 解释：匹配 QPushButton 及其子类的实例。

  3. 属性选择器

    • 示例：QPushButton[flat="false"]

      在这里插入图片描述

    • 解释：匹配 QPushButton 属性flat为false的实例，属性选择器还可以用于动态属性设置。

  4. 类选择器

    • 示例：.QPushButton，注意比类型选择器前面多了一个点；
    • 解释：匹配 QPushButton 的实例，但不匹配其子类的实例。这相当于 。*[class~="QPushButton"]

  5. ID选择器

    • 示例： QPushButton#okButton 或 #okButton；
    • 解释：匹配对象名称为.okButton的QPushButton实例。

  6. 后代选择器

    • 示例：QDialog QPushButton;

    • 解释：匹配作为 QDialog 的后代（子项、孙项等）的所有 QPushButton 实例。

      在这里插入图片描述

  7. 子选择器

    • 示例：QDialog > QPushButton；

    • 解释：匹配作为 QDialog 的直接子级的所有 QPushButton 实例。

      在这里插入图片描述

三、子控件

  • 子控件列表

对于复杂小部件的样式设置，必须访问小部件的子控件，例如 QComboBox 的下拉按钮或 QSpinBox 的上下箭头。选择器可能包含子控件，这些子控件可以将规则的应用限制为特定的小组件子控件。例如：

QComboBox::drop-down { image: url(dropdown.png) }

上述规则设置了所有QComboBox的下拉按钮的样式。虽然双冒号语法让人想起CSS3伪元素，但Qt子控件在概念上与这些不同，并且具有不同的级联语义。::

子控件始终相对于另一个元素（引用元素）定位。此引用元素可以是小组件或其他子控件。例如，默认情况下，QComboBox 的::drop-down 放置在 QComboBox 的填充矩形的右上角。

可以使用子控件矩形原点属性更改要使用的源矩形。例如，如果我们想将下拉列表放在 QComboBox 的边距矩形而不是默认的填充矩形中，我们可以指定：

QComboBox {
    margin-right: 20px;
}
QComboBox::drop-down {
    subcontrol-origin: margin;     /* 子控件矩形起点 */
}

四、伪状态

  • 伪状态列表

选择器可能包含伪状态，这些伪状态表示根据小组件的状态限制规则的应用。伪状态显示在选择器的末尾，中间有一个冒号:。例如，当鼠标悬停在 QPushButton 上时可以使用：

QPushButton:hover { color: white }

可以使用感叹号运算符对伪状态进行求反。例如，当鼠标未悬停在 QRadioButton 上时可以使用：

QRadioButton:!hover { color: red }

伪状态支持链接（没有先后），在这种情况下，逻辑 AND 是隐含的。例如，当鼠标悬停在选中的 QCheckBox 上时可以使用：

QCheckBox:hover:checked { color: white }

伪状态取反可以出现再伪状态链中，例如：

QPushButton:hover:!pressed { color: blue; }

如果需要，可以使用逗号运算符表示逻辑 或（OR）：

QCheckBox:hover, QCheckBox:checked { color: white }

伪状态可以与子控件组合出现。例如：

QComboBox::drop-down:hover { image: url(dropdown_bright.png) }

五、样式表冲突解决

当多个样式规则将同一属性指定不同的值时，就会发生冲突，例如：

QPushButton#okButton { color: gray }
QPushButton { color: red }

两个样式规则都设置了QPushButton的color值，属性存在冲突，为了解决这种冲突，我们必须考虑选择器的特殊性，QPushButton#okButton比QPushButton更具体。

在这里插入图片描述

同样，具有伪状态的选择器比不指定伪状态的选择器更具体。因此，以下样式表指定当鼠标悬停在 QPushButton 上时，QPushButton 应具有白色文本，否则为红色文本：

QPushButton:hover { color: white }
QPushButton { color: red }
  • 所以：更具体的优先级更高。

如果两条规则同样具体，则排在后面的优先级更高，如果hover放在前面，则当鼠标悬停再QPushButton上时样式表不会生效；

QPushButton:hover{
	border: 2px solid #8f8f91;         /* 设置边框粗细、样式、颜色*/
    border-radius: 6px;                /* 设置边框圆角 */	
	background-color: rgb(0, 255, 0);
}

QPushButton:enabled  {
	border: 2px solid #8f8f91;         /* 设置边框粗细、样式、颜色*/
    border-radius: 6px;                /* 设置边框圆角 */	
	background-color: rgb(255, 0, 0);
}

在这里插入图片描述

可以通过使第一条规则更具体解决第一天规则不生效的问题：

QPushButton:hover:enabled{
	border: 2px solid #8f8f91;         /* 设置边框粗细、样式、颜色*/
    border-radius: 6px;                /* 设置边框圆角 */	
	background-color: rgb(0, 255, 0);
}

QPushButton:enabled  {
	border: 2px solid #8f8f91;         /* 设置边框粗细、样式、颜色*/
    border-radius: 6px;                /* 设置边框圆角 */	
	background-color: rgb(255, 0, 0);
}

如果都是使用类型选择器，如下列这种情况，则也是排在后面的优先级更高。

QPushButton { color: red }
QAbstractButton { color: gray }

为了确定规则的特殊性，Qt样式表遵循CSS2规范：

选择器的特异性计算如下：

  • 计算选择器中 ID 属性的数量 （= a）
  • 计算选择器中其他属性和伪类的数量 （= b）
  • 计算选择器中的元素名称数 （= c）
  • 忽略伪元素 [即子控件]。

连接三个数字a-b-c（在具有大基数的数字系统中）给出了特异性。

例如：

*             {}  /* a=0 b=0 c=0 -> specificity =   0 */
LI            {}  /* a=0 b=0 c=1 -> specificity =   1 */
UL LI         {}  /* a=0 b=0 c=2 -> specificity =   2 */
UL OL+LI      {}  /* a=0 b=0 c=3 -> specificity =   3 */
H1 + *[REL=up]{}  /* a=0 b=1 c=1 -> specificity =  11 */
UL OL LI.red  {}  /* a=0 b=1 c=3 -> specificity =  13 */
LI.red.level  {}  /* a=0 b=2 c=1 -> specificity =  21 */
#x34y         {}  /* a=1 b=0 c=0 -> specificity = 100 */

六、级联

样式表可以在 QApplication、父小部件和子小部件上设置。任意小部件的有效样式表是通过合并小部件的祖先（父级、祖父级等）上的样式表集以及 QApplication 上的任何样式表集来获得的。

当发生冲突时，无论冲突规则的特殊性如何，小部件自己的样式表始终优先于任何继承的样式表。同样，父小部件的样式表优先于祖项的样式表等。

这样做的一个结果是，在小部件上设置样式规则会自动使其优先于祖先小部件的样式表或 QApplication 样式表中指定的其他规则。请考虑以下示例。首先，我们在 QApplication 上设置一个样式表：

qApp->setStyleSheet("QPushButton { color: white }");

然后我们在 QPushButton 对象上设置一个样式表：

myPushButton->setStyleSheet("* { color: blue }");

QPushButton 上的样式表强制 QPushButton（和任何子小部件）具有蓝色文本，尽管应用程序范围的样式表提供了更具体的规则集。

如果我们写

myPushButton->setStyleSheet("color: blue");

除了如果QPushButton有子项（这不太可能），样式表对它们没有影响。

七、继承

在经典 CSS 中，当项目的字体和颜色未显式设置时，它会自动从父项继承。默认情况下，使用 Qt 样式表时，小部件不会自动从其父小部件继承其字体和颜色设置。

例如，在QGroupBox中存在QPushButton：

qApp->setStyleSheet("QGroupBox { color: red; } ");

QPushButton 没有显式颜色集。因此，它不是继承其父 QGroupBox 的颜色，而是具有系统颜色。如果我们想在QGroupBox及其子项上设置颜色，我们可以这样写：

qApp->setStyleSheet("QGroupBox, QGroupBox * { color: red; }");

相反，使用 QWidget::setFont()和 QWidget::setPalette() 设置字体和调色板会传播到子小部件。

如果您希望字体和调色板传播到子控件，则可以设置Qt::AA_UseStyleSheetPropagationInWidgetStyles 标志，如下所示：

用法：

QCoreApplication::setAttribute(Qt::AA_UseStyleSheetPropagationInWidgetStyles, true);

启用小部件样式字体和调色板传播后，通过 Qt 样式表进行的字体和调色板更改的行为就像用户在样式表针对的所有 QWidget 上手动调用了相应的 QWidge::setPalette() 和 QWidget::setFont() 方法一样。如果这会导致在C++中传播，则会导致样式表中的传播，反之亦然。

在这里插入图片描述

在这里插入图片描述

八、命名空间中的控件

Qt 样式表使用小部件的 QObject::className() 来确定何时应用类型选择器。

当自定义小部件位于命名空间内时，QObject::className() 返回<namespace>::<classname>。这与子控件的语法冲突。

为了克服这个问题，当对命名空间中的小部件使用类型选择器时，我们必须将::替换为--。例如：

namespace ns {
    class MyPushButton : public QPushButton {
        // ...
    }
}

// ...
qApp->setStyleSheet("ns--MyPushButton { background: yellow; }");

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：/a/815.html

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

2023年了，还是没学会内卷....

2023年了，还是没学会内卷....

先做个自我介绍&#xff1a;我&#xff0c;普本&#xff0c;通信工程专业&#xff0c;现在飞猪干软件测试&#xff0c;工作时长两年半。 回望疫情纪元&#xff0c;正好是实习 毕业这三年。要说倒霉也是真倒霉&#xff0c;互联网浪潮第三波尾巴也没抓住&#xff0c;狗屁造富神…
阅读更多...
软件缺陷详解

软件缺陷详解

软件缺陷报告 知识点 软件缺陷的定义缺陷产生的原因如何编写缺陷报告缺陷报告的书写准则 简介 软件测试的目的是为了发现尽可能多的缺陷&#xff0c;这里的缺陷是一种泛称&#xff0c;他可以指功能的错误&#xff0c;也可以指性能低下&#xff0c;或者易用性差等。执行软件…
阅读更多...
深度学习必备知识——模型数据集Yolo与Voc格式文件相互转化

深度学习必备知识——模型数据集Yolo与Voc格式文件相互转化

在深度学习中&#xff0c;第一步要做的往往就是处理数据集,尤其是学习百度飞桨PaddlePaddle的小伙伴&#xff0c;数据集经常要用Voc格式的&#xff0c;比如性能突出的ppyolo等模型。所以学会数据集转化的本领是十分必要的。这篇博客就带你一起进行Yolo与Voc格式的相互转化&…
阅读更多...
力扣-超过经理收入的员工

力扣-超过经理收入的员工

大家好&#xff0c;我是空空star&#xff0c;本篇带大家了解一道简单的力扣sql练习题。 文章目录前言一、题目&#xff1a;181. 超过经理收入的员工二、解题1.正确示范①提交SQL运行结果2.正确示范②提交SQL运行结果3.正确示范③提交SQL运行结果4.正确示范④提交SQL运行结果5.其…
阅读更多...
Android之屏幕适配方案

Android之屏幕适配方案

在说明适配方案之前&#xff0c;我们需要对如下几个概念有所了解&#xff1a;屏幕尺寸&#xff0c;屏幕分辨率&#xff0c;屏幕像素密度。 屏幕尺寸 屏幕尺寸指屏幕的对角线的物理长度&#xff0c;单位是英寸&#xff0c;1英寸2.54厘米。 比如常见的屏幕尺寸&#xff1a;5.0、5…
阅读更多...
组件库项目搭建

组件库项目搭建

创建项目 使用pnpm create vite@latest 命令创建项目。 输入项目名，选择对应参数。 删除不需要的文件 添加pnpm-workspace.yaml 在项目根目录下创建一个pnpm-workspace.yaml文件，配置如下： packages:- demo # 存放组件示例代码- packages # packages 目录下都是组件包…
阅读更多...
【pygame游戏】Python实现蔡徐坤大战篮球游戏【附源码】

【pygame游戏】Python实现蔡徐坤大战篮球游戏【附源码】

前言 话说在前面&#xff0c;我不是小黑子~&#x1f60f; 本文章纯属技术交流~娱乐 前几天我获得了一个坤坤打篮球的游戏&#xff0c;也给大家分享一下吧~ 好吧&#xff0c;其实并不是这样的游戏&#xff0c;往下慢慢看吧。 准备工作 开发环境 Python版本&#xff1a;3.7.8 …
阅读更多...
右值和右值引用（C++11新特性）

右值和右值引用（C++11新特性）

文章目录右值VS左值右值引用VS左值引用定义move函数左值引用&&右值引用 与 函数重载模板完美转发左值引用的意义移动构造&&移动赋值默认移动构造&&赋值右值VS左值 关于什么是右值什么是左值&#xff0c;我们是这样判断的&#xff1a; 右值&#xff1…
阅读更多...
VSCode使用技巧，代码编写效率提升2倍以上！

VSCode使用技巧，代码编写效率提升2倍以上！

VSCode是一款开源免费的跨平台文本编辑器&#xff0c;它的可扩展性和丰富的功能使得它成为了许多程序员的首选编辑器。在本文中&#xff0c;我将分享一些VSCode的使用技巧&#xff0c;帮助您更高效地使用它。 1. 插件 VSCode具有非常丰富的插件生态系统&#xff0c;通过安装插…
阅读更多...
Python直接复制已有的venv虚拟环境以创建新的虚拟环境

Python直接复制已有的venv虚拟环境以创建新的虚拟环境

Python venv创建的虚拟环境复制到其他路径&#xff0c;如何断开与原始虚拟环境的连接&#xff0c;成为一个全新的虚拟环境&#xff0c;且两个虚拟环境之间的更新互不影响&#xff1f;1.软件环境⚙️2.问题描述&#x1f50d;3.解决方法&#x1f421;3.1.方法1&#xff1a;先复制…
阅读更多...
用Python Flask为女朋友做一个简单的网站（附可运行的源码）

用Python Flask为女朋友做一个简单的网站（附可运行的源码）

&#x1f31f;所属专栏&#xff1a;献给榕榕&#x1f414;作者简介&#xff1a;rchjr——五带信管菜只因一枚&#x1f62e;前言&#xff1a;该专栏系为女友准备的&#xff0c;里面会不定时发一些讨好她的技术作品&#xff0c;感兴趣的小伙伴可以关注一下~&#x1f449;文章简介…
阅读更多...
什么是PCB走线的3W原则

什么是PCB走线的3W原则

在设计PCB的时候我们会经常说到3W原则&#xff0c; 它指的是两个PCB走线它们的中心间距不小于3倍线宽&#xff0c;这个W就是PCB走线的宽度。这样做的目的主要是为了减小走线1和走线2之间的串扰&#xff0c;一般对于时钟信号&#xff0c;复位信号等一些关键信号需要遵循3W原则。…
阅读更多...
Vue插槽理解

Vue插槽理解

Vue插槽理解插槽插槽 slot又名插槽&#xff0c;vue内容分发机制&#xff0c;组件内部的模板引擎使用slot元素作为承载分发内容的出口 插槽slot是子组件的一个模板标签元素&#xff0c;而这一个元素是否显示&#xff0c;以及怎么显示是由父组件决定的 slot分为三类&#xff1a;默…
阅读更多...
链表带环问题（详解）

链表带环问题（详解）

&#x1f506;链表带环问题&#xff08;详解&#xff09;&#x1f506;I 给定一个链表&#xff0c;判断链表中是否有环。&#x1f506;II 给定一个链表&#xff0c;返回链表开始入环的第一个结点。 如果链表无环&#xff0c;则返回 NULL。&#x1f506;复制带随机指针的链表&am…
阅读更多...
集成方法！

集成方法！

目录 关注降低variance,选择bias较小的基学习器 Bagging Stacking Random Forest 关注降低bias,选择variance较小的基学习器 Adaboost Boosting 关注降低variance,选择bias较小的基学习器 Bagging 给定m个样本的数据集&#xff0c;利用有放回的随机采样法&#xff0c;得…
阅读更多...
【Linux】操作系统(Operator System)

【Linux】操作系统(Operator System)

操作系统&#xff08;Operator System &#xff09;一、操作系统的概念二、操作系统的作用三、系统调用和库函数一、操作系统的概念 操作系统是一组控制和管理计算机软硬件资源&#xff0c;为用户提供便捷使用的计算机程序的集合&#xff0c;是配置在计算机硬件系统上的第一层…
阅读更多...
模拟实现字符串有关函数（详细讲解）

模拟实现字符串有关函数（详细讲解）

在编写程序时&#xff0c;我们都喜欢写出简便并且效率高的代码&#xff0c;那么此时库函数中的有些函数就是我们的不二之选&#xff0c;那么&#xff0c;大家汇米你实现吗&#xff1f;下面就先从我们最简单的字符串函数说起&#xff1a; 1.strlen 这个是函数的格式&#xff0c…
阅读更多...
做了个springboot接口参数解密的工具，我给它命名为万能钥匙（已上传maven中央仓库，附详细使用说明）

做了个springboot接口参数解密的工具，我给它命名为万能钥匙（已上传maven中央仓库，附详细使用说明）

前言&#xff1a;之前工作中做过两个功能&#xff0c;就是之前写的这两篇博客&#xff0c;最近几天有个想法&#xff0c;给它做成一个springboot的start启动器&#xff0c;直接引入依赖&#xff0c;写好配置就能用了 springboot使用自定义注解实现接口参数解密&#xff0c;普通…
阅读更多...
SpringSecurity学习（七）授权

SpringSecurity学习（七）授权

授权 什么是权限管理 权限管理核心概念 SpringSecurity权限管理策略 基于URL地址的权限管理 基于方法的权限管理 一、权限管理 二、授权核心概念 在认证的过程成功之后会将当前用户登录信息保存到Authentication对象中&#xff0c;Authentication对象中有一个getAuthorities…
阅读更多...
ChatGPT-4震撼发布

ChatGPT-4震撼发布

3月15日消息&#xff0c;美国当地时间周二&#xff0c;人工智能研究公司OpenAI发布了其下一代大型语言模型GPT-4&#xff0c;这是其支持ChatGPT和新必应等应用程序的最新AI大型语言模型。该公司表示&#xff0c;该模型在许多专业测试中的表现超出了“人类水平”。GPT-4, 相较于…
阅读更多...
最新文章

Copyright @ 2022~2023