Qt开发 | qss介绍 | 常用样式 | 控件样式应用 | qss选择器

大家好，欢迎来到IT知识分享网。

一、什么是qss?

  Qt Style Sheets ，简写是QSS，Qt样式表，用于修改控件外观，美化界面。它类似于前端的CSS（Cascading Style Sheets）但专门用于Qt应用程序。QSS允许开发者通过样式表来控制窗口部件的外观和感觉，而无需修改应用程序的源代码。

  例如：下面QLabel的样式设置

QLabel { 
    background-color: rgb(54,54,54); /*背景色*/ color: rgb(230,230,230); /*字体颜色，前景色*/ font-family: "Microsoft YaHei"; /*字体类型*/ font-size: 14px; /*字体大小*/ } 

注释形式：

 /*我是qss注释*/ 

除了以上样式外，还有很多，qss千变万化，可以写出各种花里胡哨的样式。

二、常用样式

1. 字体样式

  下面介绍跟字体相关的样式

font-family: "Microsoft YaHei"; font-size: 14px; font-style: italic; font-weight: bold; color: #; 

解释如下：

• font-family ：为设置字体类型，标准形式需要加双引号，不加也可能会生效，具体看系统是否支持，中英文都支持，但要保证字体编码支持，一般程序编码为”utf-8″时没问题。
• font-size ：为设置字体大小，单位一般使用 px 像素
• font-style ：为设置字体斜体样式，italic 为斜体， normal 为不斜体
• font-weight ： 为设置字体加粗样式，bold 为加粗， normal 为不加粗
• color ：为设置字体颜色，可以使用十六进制数表示颜色，也可以使用某些特殊的字体颜色：red, green, blue 等，或者使用 rgb(r,g,b) 和 rgba(r,g,b,a) 来设置，其中 r、g、b、a 值为0~255，如果想不显示颜色可以设置值为透明 transparent；
  

  注意：字体颜色用的是 color 属性，没有 font-color 这个属性

字体可以一起设置：

font: bold italic 18px "Microsoft YaHei"; 

同时设置字体的weight、style、size、 family 的样式时，

• style(是否斜体) 和 weight (是否加粗)必须出现在开头，size 和 family 在后面，而且 size 必须在 family 之前，否则样式将不生效，

2.边框样式

  下面介绍跟边框相关的样式

QLabel { 
    border-style: solid; /*单独设置某一边 border-right-style:dotted;*/ border-width: 2px; border-color: red; border-radius:8px; } 

解释如下：

• border-style: 这个属性定义了边框的样式。
  • border-style: none; 表示没有边框。
  • border-style: solid; 表示边框是实线。
  • border-style: dashed; 表示边框是虚线。
  • border-style: dotted; 表示边框是点线。
  • border-style: double; 表示边框是双线。
  • border-style: groove; 表示边框看起来像是凹进去的。
  • border-style: ridge; 表示边框看起来像是有脊的。
  • border-style: inset; 表示边框看起来像是内嵌的。
  • border-style: outset; 表示边框样式为外凸
• border-width: 这个属性设置了边框的宽度。
• border-color: 这个属性定义了边框的颜色。
• border-radius: 这个属性设置了边框角的圆角半径。

边框也可以一起设置

border: 2px solid red; 

表示边框设置为2像素宽的实线，颜色为红色。

  边框的属性还可以左上右下分开设置：

//顶部边框样式 border-top-style: solid; //设置顶部边框的样式为实线（solid） border-top-width: 2px; //设置顶部边框的宽度为2像素。 border-top-color: red; //设置顶部边框的颜色为红色。 border-top: 2px solid red; //顶部边框设置为2像素宽的红色实线 //右侧边框样式 border-right-style: solid; border-right-width: 3px; border-right-color: green; border-right: 3px solid green; //底部边框样式 border-bottom-style: solid; border-bottom-width: 2px; border-bottom-color: blue; border-bottom: 2px solid blue; //左侧边框样式 border-left-style: solid; border-left-width: 3px; border-left-color: aqua; border-left: 3px solid aqua; 

  边框半径(圆角)也可以单独设置

border-top-left-radius: 5px; //左上角的圆角 border-top-right-radius: 10px; border-bottom-left-radius: 15px; border-bottom-right-radius: 20px; border-radius: 20px; /*统一的半径*/ 

  若不需要边框则可设置为border:none;

3.文字位置

  在 qss 中，没有对齐方式，只能通过设置 padding 来实现文字的显示位置；一般 padding-left 相当于 x 坐标，padding-top 相当于 y 坐标，设置这两个就可以在任意位置显示了（默认情况下文字是上下左右都居中显示的）

//内边距，设置文本与边界之间的空间 padding-left: 10px; padding-top: 8px; padding-right: 7px; padding-bottom: 9px; 

QLabel的文本默认是居中的，无论是水平方向还是垂直方向。如果你想要改变这种默认行为，可能需要使用QLabel的alignment属性来指定文本的具体对齐方式。

4.背景样式

  其它的控件也适用背景样式，下面介绍与背景有关的样式

background-color: rgb(54,54,54); background-image: url(:/imgs/picture/0.png); /*显示背景图片, 也可以不用引号*/ background-repeat: no-repeat; /*不重复显示*/ background-position: left center; 

解释如下：

• background-color：为设置背景颜色，可以使用十六进制数表示颜色，也可以使用某些特殊的字体颜色：red, green, blue 等，或者使用 rgb(r,g,b) 和 rgba(r,g,b,a) 来设置，其中 r、g、b、a 值为0~255，如果想不显示颜色可以设置值为透明 transparent
• background-image： 为设置背景图片，图片路径为 url(image-path)
• background-repeat： 为设置背景图是否重复填充背景，如果背景图片尺寸小于背景实际大小的话，默认会自动重复填充图片，可以设置为 no-repeat 不重复，repeat-x 在x轴重复，repeat-y 在y轴重复

  若背景图片大小为64×64，而背景实际大小为300×300，若没有设置background-repeat: no-repeat;，则显示如下：

  

• background-position： 为设置背景图片显示位置，只支持 left right top bottom center；值 left right center 为设置水平位置，值 top bottom center 为设置垂直位置

统一设置

background: url(":/imgs/picture/0.png") no-repeat left center #; 

background 为设置背景的所有属性，color image repeat position 这些属性值出现的顺序可以任意

5.动态悬浮样式

  hover 用于选择用户鼠标悬停在其上的窗口部件。当用户将鼠标指针移动到QLabel上时，QLabel:hover中定义的样式就会生效。

QLabel:hover { 
    color: red; border-color: green; background-color: #; } 

上述样式设置后，当鼠标悬停在QLabel上时，文本变成红色，边框颜色变成绿色，背景颜色变成深灰色。

6.禁止使用的样式

  disabled 是一个伪类选择器，用于选择处于禁用状态的窗口部件。当一个QLabel被设置为禁用状态时，它不会响应用户的任何交互，比如点击或悬停。使用:disabled伪类，你可以为禁用状态下的QLabel定义特定的样式。

QLabel:disabled { 
    color: blue; border-color: brown; background-color: #; } 

样式代码定义了当QLabel处于禁用状态时的样式：

• 文本颜色变为蓝色（color: blue;）。
• 边框颜色变为棕色（border-color: brown;）。
• 背景颜色变为深灰色（background-color: #;）。

在Qt中，要使一个QLabel或其他窗口部件处于禁用状态，你可以使用相应的方法，例如对于QLabel，你可以调用setDisabled(true)方法。当需要重新启用该部件时，调用setDisabled(false)即可。

三、控件应用

更完整的控件应用参考：Qt开发 | qss介绍 | 常用样式 | 控件样式应用 | qss选择器

1.QLabel

  效果图

鼠标悬浮后：

qss代码如下：

QLabel { 
    font-family: "Microsoft YaHei"; font-size: 18px; color: #BDC8E2; font-style: normal; font-weight: normal; border-style: solid; border-width: 2px; border-color: aqua; border-radius: 20px; padding-left: 20px; padding-top: 3px; background-color: #2E3648; background-image: url("./image.png"); background-repeat: no-repeat; background-position: left center; } 

除此之外，我们还可以设置动态样式，鼠标悬浮时的样式

QLabel:hover { 
    color: red; border-color: green; background-color: aqua; } 

2.QLineEdit

  常用属性设置

setReadOnly(false); // 只读 setFocusPolicy(Qt::NoFocus); // 设置控件的焦点策略：无法获得焦点 setMaxLength(10); // 最多输入10个字符 setEchoMode(QLineEdit::Password); //设置行编辑的回显模式为密码模式 

  =文本对齐方式

lineedit->setAlignment(Qt::AlignLeft) //左对齐 lineedit->setAlignment(Qt::AlignRight) //右对齐 lineedit->setAlignment(Qt::AlignCenter) //居中对齐 

  正则控制输入。例如：第一个数是1-9的，第二个数和之后的是0-9的

QRegExp regx("\\w[-\\w.+]*@([A-Za-z0-9][-A-Za-z0-9]+\\.)+[A-Za-z]{2,14}"); //邮箱正则 QValidator *validator = new QRegExpValidator(regx, ui->lineEdit); lineEdit->setValidator(validator); //设置行编辑值的验证器为正则，满足正则的输入才为有效值 

  样式设置

qss代码

QLineEdit{ 
    border: 1px solid #ABCDA0; /* 边框宽度为1px，颜色为#A0A0A0 */ border-radius: 3px; /* 边框圆角 */ padding-left: 5px; /* 文本距离左边界有5px */ background-color: #F2F2F2; /* 背景颜色 */ color: #A0A0A0; /* 文本颜色 */ selection-background-color: #A0A0A0; /* 选中文本的背景颜色 */ selection-color: #F2F2F2; /* 选中文本的颜色 */ font-family: "Microsoft YaHei"; /* 文本字体族 */ font-size: 10pt; /* 文本字体大小 */ } QLineEdit:hover { 
    /* 鼠标悬浮在QLineEdit时的状态 */ border: 1px solid #298DFF; border-radius: 3px; background-color: #F2F2F2; color: #298DFF; selection-background-color: #298DFF; selection-color: #F2F2F2; } /*0为正常显式，1为ubuntu模式下，2为密码显式，3为ubuntu下的密码显式--看不到输入内容*/ /*与方法setEchoMode(QLineEdit::EchoMode)一起使用*/ QLineEdit[echoMode="2"] { 
    /* QLineEdit有输入掩码时的状态 */ lineedit-password-character: 9679; lineedit-password-mask-delay: 2000; } QLineEdit:disabled { 
    /* QLineEdit在禁用时的状态 */ border: 1px solid #CDCDCD; background-color: #CDCDCD; color: #B4B4B4; } QLineEdit:read-only { 
    /* QLineEdit在只读时的状态 */ background-color: #CDCDCD; color: #F2F2F2; } 

3.QPushButton 按钮样式

3.1 基本样式

  基本样式表示例如下：

QPushButton { 
    /* 前景色, 文字的颜色 */ color:green; /* 背景色 */ background-color:rgb(223,223,223); /* 边框风格 */ border-style:outset; /* 边框宽度 */ border-width:0.5px; /* 边框颜色 */ border-color:rgb(10,45,110); /* 边框倒角 */ border-radius:10px; /* 字体 */ font:bold 22px; /* 控件最小宽度 */ min-width:100px; /* 控件最小高度 */ min-height:20px; /* 内边距 */ padding:4px; } /* 鼠标按下时的效果，这里指定了对象名称 */ QPushButton#pushButton:pressed { 
    /* 改变背景色 */ background-color:rgb(40,85,20); /* 改变边框风格 */ border-style:inset; /* 使文字有一点移动 */ padding-left:6px; padding-top:6px; } /* 按钮样式 */ QPushButton:flat { 
    border:2px solid red; } /*鼠标悬浮时的效果*/ QPushButton:hover { 
    color:#0000ff; background-color:rgb(210, 205, 205); /*改变背景色*/ border-style:inset;/*改变边框风格*/ padding-left:8px; padding-top:8px; } 

效果图：

悬浮时：

点击时：

  还可以单独指定按钮，用#标明例如：

/*鼠标悬浮时的效果*/ QPushButton#btn2:hover { 
    color:#0000ff; background-color:rgb(100, 100, 20); /*改变背景色*/ border-style:inset;/*改变边框风格*/ padding-left:8px; padding-top:8px; } 

  相关状态有

:checked button部件被选中 :unchecked button部件未被选中 :disabled 部件被禁用 :enabled 部件被启用 :focus 部件获得焦点 :hover 鼠标位于部件上 :pressed 部件被鼠标按下 :indeterminate checkbox或radiobutton被部分选中 :off 部件可以切换，且处于off状态 :on 部件可以切换，且处于on状态 

  当按钮被禁用后（ui->pushButton->setEnabled(false);）

QPushButton:disabled { 
    color: blue; border-color: brown; background-color: #; } 

  若要添加按钮的背景图片，则使用如下qss代码

QPushButton { 
    background-image:url(":/resources/user.png"); background-position:center; background-repeat: no-repeat; border:none } QPushButton:hover { 
    background-color:rgb(10,210,210); background-image:url(":/resources/user_hover.png") } QPushButton:pressed { 
    background-color:rgb(255, 0, 0); background-image:url(":/resources/user.png"); padding-left:8px; padding-top:8px; } 

svg 矢量图 ：可以随着控件大小而改变，不会失真。做项目时，产品要提供6张图：正常状态、悬浮状态、点击状态（vip/非vip各一套）

效果图：

悬浮时：

点击时：

4.QSlider

效果图：

水平的QSlider的qss：

QSlider { 
    background-color: #; border-style: outset; border-radius: 10px; } /*凹槽的样式*/ QSlider::groove:horizontal { 
    height: 12px; background: qlineargradient(x1:0, y1:0, x2:0, y2:1, stop:0 #B1B1B1, stop:1 #c4c4c4); margin: 2px 0 } /*柄的样式*/ QSlider::handle:horizontal { 
    background: QRadialGradient(cx:0, cy:0, radius: 1, fx:0.5, fy:0.5, stop:0 white, stop:1 green); width: 16px; height: 16px; margin: -5px 6px -5px 6px; border-radius:11px; border: 3px solid #ffffff; } 

竖直的QSlider的qss：

QSlider { 
    background-color: rgba(22, 22, 22, 0.7); padding-top: 15px; /*上面端点离顶部的距离*/ padding-bottom: 15px; border-radius: 5px; /*外边框矩形倒角*/ } /*柄下方部分样式*/ QSlider::add-page:vertical { 
    background-color: #FF7826; width:5px; border-radius: 2px; } /*柄上方部分样式*/ QSlider::sub-page:vertical { 
    background-color: #7A7B79; width:5px; border-radius: 2px; } /*凹槽样式*/ QSlider::groove:vertical { 
    background:transparent; width:6px; } /*柄的样式*/ QSlider::handle:vertical { 
    height: 14px; width: 14px; margin: 0px -4px 0px -4px; border-radius: 7px; background: white; } 

5.QComboBox

5.1 样式1：

qss代码为：

/* 未下拉时，QComboBox的样式 */ QComboBox { 
    background:rgb(54,54,54); border: 1px solid gray; /* 边框 */ border-radius: 5px; /* 圆角 */ padding: 1px 18px 1px 3px; /* 字体填衬 */ color: white; font: normal normal 24px "Microsoft YaHei"; } 

5.2 样式2

qss代码为

/* 未下拉时，QComboBox的样式 */ QComboBox { 
    border: 1px solid gray; /* 边框 */ border-radius: 5px; /* 圆角 */ padding: 1px 18px 1px 3px; /* 字体填衬 */ color: white; font: normal normal 24px "Microsoft YaHei"; background:rgb(54,54,54); } /* 下拉后，整个下拉窗体样式 */ QComboBox QAbstractItemView { 
    outline: 0px solid gray; /* 选定项的虚框 */ border: 1px solid yellow; /* 整个下拉窗体的边框 */ color: rgb(250,251,252); background-color: rgb(70,80,90); /* 整个下拉窗体的背景色 */ selection-background-color: lightgreen; /* 整个下拉窗体被选中项的背景色 */ } /* 下拉后，整个下拉窗体每项的样式 */ /* 项的高度（设置pComboBox->setView(new QListView(this));后该项才起作用） */ QComboBox QAbstractItemView::item { 
    height: 50px; } /* 下拉后，整个下拉窗体越过每项的样式 */ QComboBox QAbstractItemView::item:hover { 
    color: rgb(90,100,105); background-color: lightgreen; /* 整个下拉窗体越过每项的背景色 */ } /* 下拉后，整个下拉窗体被选择的每项的样式 */ QComboBox QAbstractItemView::item:selected { 
    color: rgb(12, 23, 34); background-color: lightgreen; } /* QComboBox中的垂直滚动条 */ QComboBox QAbstractScrollArea QScrollBar:vertical { 
    width: 13px; background-color: #d0d2d4; /* 空白区域的背景色*/ } QComboBox QAbstractScrollArea QScrollBar::handle:vertical { 
    border-radius: 5px; /* 圆角 */ background: rgb(60,60,60); /* 小方块的背景色深灰lightblue */ } QComboBox QAbstractScrollArea QScrollBar::handle:vertical:hover { 
    background: rgb(90, 91, 93); /* 越过小方块的背景色yellow */ } /* 设置为可编辑（setEditable(true)）editable时，编辑区域的样式 */ QComboBox:editable { 
    background: green; } /* 设置为非编辑（setEditable(false)）!editable时，整个QComboBox的样式 */ QComboBox:!editable { 
    background: rgb(54,54,54); } /* 设置为可编辑editable时，点击整个QComboBox的样式 */ QComboBox:editable:on { 
    background: rgb(54,54,54); } /* 设置为非编辑!editable时，点击整个QComboBox的样式 */ QComboBox:!editable:on { 
    background: rgb(54,54,54); } /* 设置为可编辑editable时，下拉框的样式 */ QComboBox::drop-down:editable { 
    background: rgb(54,54,54); } /* 设置为可编辑editable时，点击下拉框的样式 */ QComboBox::drop-down:editable:on { 
    background: rgb(54,54,54); } /* 设置为非编辑!editable时，下拉框的样式 */ QComboBox::drop-down:!editable { 
    background: rgb(54,54,54); } /* 设置为非编辑!editable时，点击下拉框的样式 */ QComboBox::drop-down:!editable:on { 
    background: rgb(54,54,54); image: url(:/resources/up.png); /* 显示上拉箭头 */ } /* 下拉框样式 */ QComboBox::drop-down { 
    subcontrol-origin: padding; /* 子控件在父元素中的原点矩形。如果未指定此属性，则默认为padding。 */ subcontrol-position: top right; /* 下拉框的位置（右上） */ width: 32px; /* 下拉框的宽度 */ border-left-width: 1px; /* 下拉框的左边界线宽度 */ border-left-color: darkgray; /* 下拉框的左边界线颜色 */ border-left-style: solid; /* 下拉框的左边界线为实线 */ border-top-right-radius: 3px; /* 下拉框的右上边界线的圆角半径（应和整个QComboBox右上边界线的圆角半径一致） */ border-bottom-right-radius: 3px; /* 同上 */ image: url(:/resources/down.png); } /* 越过下拉框样式 */ QComboBox::drop-down:hover { 
    background: rgb(80, 75, 90); } /* 下拉箭头样式 */ QComboBox::down-arrow { 
   　　 width: 32px; /* 下拉箭头的宽度（建议与下拉框drop-down的宽度一致） */ 　　 background: rgb(54,54,54); /* 下拉箭头的的背景色 */ 　　 padding: 0px 0px 0px 0px; /* 上内边距、右内边距、下内边距、左内边距 */　　 image: url(:/resources/down.png); } /* 点击下拉箭头 */ QComboBox::down-arrow:on { 
    　　 image: url(:/resources/up.png); /* 显示上拉箭头 */ } 

6.QProgressBar

6.1 水平样式1

  QProgressBar默认是水平效果。

qss代码：

QProgressBar { 
    background:rgb(54,54,54); border:none; /*无边框*/ border-radius:5px; text-align:center; /*文本的位置*/ color: rgb(229, 229, 229); /*文本颜色*/ } /*chunk表示里面的进度条*/ QProgressBar::chunk { 
    background-color:rgb(58, 154, 255); border-radius:4px; } 

6.2 水平样式2

  效果图：

qss代码

QProgressBar { 
    border-radius:5px; background-color:darkgray; text-align:center } QProgressBar::chunk { 
    background-color:#1F0FEF; width:6px; margin:5px; /*相邻进度间距离为5*/ } 

3.竖直样式表

  C++设置：

ui->progressBar_2->setOrientation(Qt::Vertical); ui->progressBar_2->setFixedWidth(60); ui->progressBar_2->setFixedHeight(300); 

例如下面的效果

qss代码

QProgressBar:vertical { 
    border-radius:5px; background-color:darkgray; text-align:center; padding-left: 5px; padding-right: 4px; padding-bottom: 2px; } QProgressBar::chunk:vertical { 
    background-color:#06B025; margin:1px; } 

4.其它竖直样式–渐变色

  渐变色

qss代码

QProgressBar:vertical { 
    border-radius:5px; background-color:darkgray; text-align:center; padding-left: 5px; padding-right: 4px; padding-bottom: 2px; } QProgressBar::chunk:vertical { 
    /*QLinearGradient表示使用渐变色*/ background-color:QLinearGradient( x1: 0, y1: 0, x2: 0, y2: 1,stop: 0 #00ff58,stop: 1 #034f1f); margin:1px; } 

7.QMenu菜单样式

  qss代码

QMenu::item { 
    font:16px; background-color:rgb(253,253,253); /*白*/ padding:8px 32px; margin:0px 8px; border-bottom:1px solid #DBDBDB; /*灰白*/ } /*选择项设置*/ QMenu::item:selected { 
    background-color: #FFF8DC; /*黄*/ } 

四、qss 选择器

1.通配符选择器

  通配符选择器用于匹配所有的控件，用星号表示

* { 
    background-color:yellow; } 

设置后所有控件窗口背景色都被修改了；

  还可以指明子类

* QPushButton{ 
    background-color:yellow; } 

设置后所有按钮窗口背景色被修改。

注意：

在Qt的样式表（QSS）中，通配符选择器（*）可以匹配所有控件，因此可以为所有控件设置统一的样式。然而，当使用通配符选择器设置的样式与特定控件的样式冲突时，是否覆盖取决于CSS样式表的层叠规则（Cascading Style Sheets）。

CSS层叠规则的几个关键点：

1. 内联样式：直接在控件的属性中设置的样式（如setStyleSheet("color: red;")）具有最高优先级。
2. ID选择器：#id 的优先级高于类选择器和类型选择器。
3. 类选择器：.classname 的优先级高于类型选择器。
4. 类型选择器：QLabel、QPushButton 等控件类型的选择器具有基本的优先级。
5. 通配符选择器：* 的优先级最低。
6. 特异性（Specificity）：选择器的组合方式决定了其特异性，特异性越高，样式规则的优先级越高。
7. 来源顺序：如果所有条件相同，样式表中后面定义的规则将覆盖前面的定义。
8. 重要性（Importance）：使用 !important 的规则将覆盖没有使用 !important 的规则，无论其特异性如何。

因此，如果一个控件同时被通配符选择器和更具体的选择器（如类型选择器或类选择器）匹配，并且两者定义了相同的属性，那么更具体的选择器将覆盖通配符选择器的样式。如果控件的样式具有更高的特异性或使用了 !important，那么即使通配符选择器先定义，控件的样式也会覆盖通配符选择器的样式。

例如：

* { 
     color: blue; /* 通配符选择器 */ } QLabel { 
     color: red; /* 类型选择器，具有更高的特异性 */ } 

在这种情况下，所有QLabel控件的文本颜色将被设置为红色，而不是通配符选择器定义的蓝色，因为类型选择器的特异性高于通配符选择器。

2.类型选择器

  通过控件类型来匹配控件的(包括子类)

QWidget { 
    background-color:yellow } 

  如果想防止子类样式被父类影响，例如窗口被修改，可以设置属性

//禁止父窗口影响子窗口样式 setAttribute(Qt::WA_StyledBackground); 

  类选择器也是通过控件类型来匹配控件的，但不同的是不包含子类，语法是在类前面加了个.（是个点）

.QWidget { 
    background-color:yellow } //注意类前面有个点 

这样就只对QWidget生效，如果界面上有其它控件则不生效。

3.ID选择器

  ID选择器是结合控件的objectname来匹配控件的，qss里objectname前加个井号来表示，不同控件的objectname是可以相同的 。

QPushButton#pushButton_2 { 
    background-color:blue } 

4.属性选择器

  属性选择器是结合控件的属性值来匹配控件的，首先要设定控件的属性，qss里属性用[proterty = attitude]来限制 。

qt代码：设定控件的属性

label1.setProperty('notice_level','error') label2.setProperty('notice_level','warning') 

qss：样式表

.QLabel { 
    background-color:pink; } .QLabel[notice_level='warning'] { 
    border:5px solid yellow; } .QLabel[notice_level='error'] { 
    border:5px solid red; } 

  这里还有个用法，就是qss内只定义属性值，只要有这个属性的控件就可以被选中

.QLabel [notice_level]{ 
    background-color:pink; } .QLabel[notice_level='warning'] { 
    border:5px solid yellow; } .QLabel[notice_level='error'] { 
    border:5px solid red; } 

只要有novice_level这个属性的控价都是生效的。