Qt:25.QSS选择器(类型选择器、类选择器、id选择器、并集选择器、子控件选择器、伪类选择器)

目录

1.类型选择器:

2.类选择器:

3.id选择器:

4.并集选择器:

5.子控件选择器:

6.伪类选择器:


1.类型选择器:

  • 类型选择器用于选择应用样式的特定类型控件。

  • 它通过控件类型的名称来选择所有该类型的控件,并对其应用相应的样式。

  • 这种选择器会向下继承,比如在QWidget控件中设置了样式,在父控件范围内的其他继承自QWidget类的派生类控件,也会使用这个样式。

    控件类型
    {
    background-color: #007bff; /* 背景颜色 /
    color: white; /
    文字颜色 /
    border: 1px solid #0056b3; /
    边框 /
    border-radius: 4px; /
    圆角 /
    padding: 5px; /
    内边距 */
    }

2.类选择器:

  • 类选择器用于选择具有指定类名的控件。只针对某个类生效,不会对他的子类有继承。

  • 使用类选择器可以为特定组的控件应用样式,而无需指定每个控件的类型。

  • 类选择器在QSS中的语法与CSS类似,使用点号(.)后跟类名来定义。

    .控件类
    {
    background-color: #28a745; /* 背景颜色 /
    color: white; /
    文字颜色 /
    border: 1px solid #1e7e34; /
    边框 /
    border-radius: 4px; /
    圆角 /
    padding: 5px; /
    内边距 */
    }

3.id选择器:

  • ID选择器用于选择具有特定ID(控件的objectName)的控件,确保唯一性。

  • 每个ID在一个QSS文件中只能出现一次。

  • 使用ID选择器可以精确地为某个特定控件应用样式。

    #objectName
    {
    background-color: #007bff; /* 背景颜色 /
    color: white; /
    文字颜色 /
    border: 1px solid #0056b3; /
    边框 /
    border-radius: 4px; /
    圆角 /
    padding: 5px; /
    内边距 */
    }

4.并集选择器:

  • 并集选择器(grouping selector)用于将多个选择器组合在一起,使它们共享相同的样式。

  • 这种选择器在QSS中的语法与CSS类似,使用逗号(,)分隔多个选择器。

  • 类型可以混合,比如类型选择器+类选择器+id选择器。

    选择器1,选择器2,选择器n
    {
    background-color: #007bff; /* 背景颜色 /
    color: white; /
    文字颜色 /
    border: 1px solid #0056b3; /
    边框 /
    border-radius: 4px; /
    圆角 /
    padding: 5px; /
    内边距 */
    }

5.子控件选择器:

  • 子控件选择器(child control selector)在QSS中用于选择控件的子部件(sub-controls)。

  • 例如对于复合控件或者控件的特定部分(如滚动条的滑块、下拉框的箭头等),可以对其进行样式定制。

  • 子控件选择器的语法在QSS中使用双冒号(::)来区分子控件和主控件的关系。

    主控件类型::子控件名称
    {
    属性: 值;
    属性: 值;
    ...
    }

    //以下QSS代码将应用于QComboBox控件的下拉箭头部分,设置其颜色和背景。

    QComboBox::drop-down
    {
    background-color: #007bff; /* 箭头背景颜色 /
    color: white; /
    箭头颜色 */
    }

6.伪类选择器:

  • 根据控件所处在的状态进行选择。
  • 当控件具备某个状态时,样式生效。当控件不具备哪个状态时,样式不生效。
  • 比如按钮按下,输入框获得焦点等。
相关推荐
待磨的钝刨36 分钟前
【格式化查看JSON文件】coco的json文件内容都在一行如何按照json格式查看
开发语言·javascript·json
逐·風4 小时前
unity关于自定义渲染、内存管理、性能调优、复杂物理模拟、并行计算以及插件开发
前端·unity·c#
Devil枫4 小时前
Vue 3 单元测试与E2E测试
前端·vue.js·单元测试
尚梦5 小时前
uni-app 封装刘海状态栏(适用小程序, h5, 头条小程序)
前端·小程序·uni-app
GIS程序媛—椰子5 小时前
【Vue 全家桶】6、vue-router 路由(更新中)
前端·vue.js
前端青山6 小时前
Node.js-增强 API 安全性和性能优化
开发语言·前端·javascript·性能优化·前端框架·node.js
毕业设计制作和分享6 小时前
ssm《数据库系统原理》课程平台的设计与实现+vue
前端·数据库·vue.js·oracle·mybatis
从兄7 小时前
vue 使用docx-preview 预览替换文档内的特定变量
javascript·vue.js·ecmascript
徒步僧8 小时前
ThingsBoard规则链节点:RPC Call Reply节点详解
qt·microsoft·rpc
清灵xmf8 小时前
在 Vue 中实现与优化轮询技术
前端·javascript·vue·轮询