当前位置：首页 > news >正文

QSS样式表的选择器

news 来源：原创 2025/5/13 14:04:01

一个最简单的样式设置格式如下

QWidget {background-color: black;
}

将样式应用到对应的控件

QWidget* w = new QWidget;
w->setStyleSheet("QWidget {background-color: black;}");

样式表中控件的设置有多种方式

通用选择器

/*匹配所有控件*/
*{}

类型选择器

/*匹配所有该类型的控件*/
QWidget{}

ID选择器

//控件可以设置自己的名字
QWidget* w = new QWidget;
w->setObjectName("specialWidget");

QWidget#specialWidget{}/*可以同时匹配多个*/
QWidget#specialWidget1, #specialWidget2{}

ID选择器(模糊查找)

/*匹配所有ID以groupWidget开头的控件*/
QWidget[objectName^="groupWidget"]{}/*匹配所有ID包含Widget的控件*/
QWidget[objectName^="Widget"]{}

属性选择器

/*匹配选中的复选框*/
QCheckBox[checked="true"]{}

也可以使用自定义的属性

QWidget* w = new QWidget;
w->setObjectName("specialWidget");
w->setProperty("state", "default");

/*匹配state为default的QWidget控件*/
QWidget[state="default"]{}

状态选择器

/*匹配QPushButton鼠标悬停在按钮上的样式*/
QPushButton:hover{}

子控件

/*匹配QTableWidget(表格)的项(单元格)*/
QTableWidget::item{}

组合选择器

/*匹配QHeaderView中所有子控件类型为QWidget的控件*/
QHeaderView QWidget {}

一些例子

选择器可以组合使用

/*匹配ID为Mix-leftTitleWidget和ID以Mix-Icon开头的控件*/
QWidget#Mix-leftTitleWidget, [objectName^="Mix-Icon"] {}/*匹配ID以CoalYard-Data开头，且state属性为false时候的控件*/
QLabel[objectName^="CoalYard-Data"][state = "false"] {}/*匹配ID以Effluent-button开头，且鼠标悬停在按钮上的控件*/
QPushButton[objectName^="Effluent-button"]:hover {}/*匹配日历控件中日期子控件的工具按钮子控件*/
QDateTimeEdit QCalendarWidget QToolButton {}/*匹配表格控件中，被选中的单元格，鼠标悬停在上面时的控件*/
QTableWidget:item:selected:hover {}