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.伪类选择器:

  • 根据控件所处在的状态进行选择。
  • 当控件具备某个状态时,样式生效。当控件不具备哪个状态时,样式不生效。
  • 比如按钮按下,输入框获得焦点等。
相关推荐
腾讯TNTWeb前端团队1 小时前
helux v5 发布了,像pinia一样优雅地管理你的react状态吧
前端·javascript·react.js
范文杰4 小时前
AI 时代如何更高效开发前端组件?21st.dev 给了一种答案
前端·ai编程
拉不动的猪4 小时前
刷刷题50(常见的js数据通信与渲染问题)
前端·javascript·面试
拉不动的猪4 小时前
JS多线程Webworks中的几种实战场景演示
前端·javascript·面试
FreeCultureBoy5 小时前
macOS 命令行 原生挂载 webdav 方法
前端
uhakadotcom6 小时前
Astro 框架:快速构建内容驱动型网站的利器
前端·javascript·面试
uhakadotcom6 小时前
了解Nest.js和Next.js:如何选择合适的框架
前端·javascript·面试
uhakadotcom6 小时前
React与Next.js:基础知识及应用场景
前端·面试·github
uhakadotcom6 小时前
Remix 框架:性能与易用性的完美结合
前端·javascript·面试
uhakadotcom6 小时前
Node.js 包管理器:npm vs pnpm
前端·javascript·面试