QSS选择器总结

江心映明月

已于 2022-07-28 14:04:05 修改

阅读量1.5k

点赞数 1

分类专栏： QT 文章标签： ui javascript 开发语言 qt5 qt

于 2022-07-28 14:02:17 首次发布

本文链接：https://blog.csdn.net/weixin_43212394/article/details/126031252

版权

QT 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

本文详细介绍了QSS（Qt Style Sheets）的各种选择器，包括通用选择器、类型选择器、类选择器、ID选择器、属性选择器、后代选择器、子选择器、伪类选择器以及子控件选择器。通过实例展示了如何使用这些选择器实现对Qt界面元素的精确样式控制，如背景颜色、状态变化等，帮助开发者创建更加美观且交互丰富的应用程序界面。

摘要由CSDN通过智能技术生成

QSS选择器总结

整理以备忘

通用选择器

*为通用选择器，作用在所有Widget

作用范围： 所有

使用及效果：

*{background-color: rgb(85, 170, 255);}

在这里插入图片描述

类型选择器

类名作为选择器

作用范围： 自身及其子类元素

使用及效果：

    QString Stylesheet="QWidget{background-color: rgb(85, 170, 255);}";
    this->setStyleSheet(Stylesheet);

在这里插入图片描述

	QString Stylesheet="QPushButton{background-color: rgb(85, 170, 255);}";
    this->setStyleSheet(Stylesheet);

在这里插入图片描述

类选择器

.+类名作为选择器

作用范围： 自身

使用及效果：

	QString Stylesheet=".QWidget{background-color: rgb(85, 170, 255);}";
    this->setStyleSheet(Stylesheet);

在这里插入图片描述

ID选择器

#+objectName 作为选择器

作用范围： 指定objectName 的控件

使用及效果：

	ui->widgetIn->setObjectName("SelectWidget");
    QString Stylesheet="#SelectWidget{background-color: rgb(85, 170, 255);}";
    this->setStyleSheet(Stylesheet);

在这里插入图片描述

属性选择器

[属性=属性值] 作为选择器
或
类名[属性=属性值] 作为选择器

作用范围： 属性值匹配的元素

使用及效果：

	ui->pushButton_1->setProperty("Status","Select");
    QString Stylesheet="QPushButton[Status=Select]{background-color: rgb(85, 170, 255);}";
    this->setStyleSheet(Stylesheet);
//    ui->pushButton_1->setProperty("Status","Select");
//    ui->widgetIn->setProperty("Status","Select");
//    QString Stylesheet="[Status=Select]{background-color: rgb(85, 170, 255);}";
//    this->setStyleSheet(Stylesheet);

在这里插入图片描述

后代选择器

选择器+“空格”+后代选择器作为选择器

作用范围： 元素的所有后代的指定元素

使用及效果：

    QString Stylesheet="#widgetOut QPushButton{background-color: rgb(85, 170, 255);}";
    this->setStyleSheet(Stylesheet);

在这里插入图片描述

子选择器

选择器+>+子选择器作为选择器

作用范围： 元素的直接后代的指定元素

使用及效果：

	QString Stylesheet="#widgetOut>QPushButton{background-color: rgb(85, 170, 255);}";
    this->setStyleSheet(Stylesheet);

在这里插入图片描述

伪类选择器

选择器 : 状态作为选择器

作用范围： 指定元素的特定状态

使用及效果：

    QString Stylesheet="QPushButton:hover {background-color: rgb(85, 170, 255);}";
    this->setStyleSheet(Stylesheet);

在这里插入图片描述
鼠标悬浮在按钮上变色。

其他支持的伪类查看文档

子控件选择器

选择器 :: 子控件作为选择器

作用范围： 复杂控件的子控件

使用及效果：

    QString Stylesheet=""
            "QComboBox::drop-down"
                "{"
                    "background-color: rgb(85, 170, 255);"
                    "subcontrol-origin: padding;"
                    "subcontrol-position: right center;"
                "}"
            "QComboBox::down-arrow:hover"
                "{"
                    "top: 1px;"
                    "left: 1px;"
                "}"
            "QComboBox::down-arrow"
                "{"
                    "height: 12px;"
                    "width: 12px;"
                    "image: url(:/Down-Arrow16.png);"
                "}";
    this->setStyleSheet(Stylesheet);