本文主要是对官方文档的翻译。

一、Qss作用与规则

Qss(Qt style sheet)是一种样式文本规范，可以使用QApplication::setStyleSheet()来设置整个应用的样式或者使用QWidget::setStyleSheet()设置某个QWidget(包括其子类)窗体的样式。Qss具有级联属性，即假设在不同的级别设置了多个样式表，那么Qt将从所有设置的样式表中派生出有效的样式表。样式表可以让您执行所有类型的定制，这些定制仅使用QPalette是很难或不可能执行的。例如，你想要黄色背景作为强制字段，红色文本作为潜在的破坏性按钮，或者花哨的复选框，样式表就是答案。

样式规则由一个选择器（selector）和一个声明(declaration)组成。选择器指定哪些Widget受到该规则的影响；声明指定应该在Widget上设置哪些属性。例如:QPushButton { color: red } ,QPushButton是selector,{color:red}是declaration，这个规则指定QPushButton和其子类应该使用红色作为前景色（文本颜色）。样式规则中的申明部分是由一个{property:value}表组成的，例如：QPushButton { color: red; background-color: white }。当多个类型的Widget具有相同的{property:value}时也可以在selector部分使用逗号隔开，例如QPushButton, QLineEdit, QComboBox { color: red }。

二、selector类型

Qt样式表支持CSS2中定义的所有选择器。下表总结了常用的选择器类型。

三、Property类型

下表列出了Qt样式表支持的常用属性（所有属性见https://doc.qt.io/qt-5/stylesheet-reference.html）。可以给属性赋哪些值取决于属性的类型。除非另有说明，以下属性适用于所有小部件。标记有星号*的属性是特定于Qt的，在CSS2或CSS3中没有相同的属性。

QTreeView {
    alternate-background-color: blue;
    background: yellow;
}

QTextWdit {background：red};
QFrame {background:url(:/img/first.jpg)};

QFrame {
background: white url(:/images/ring.png);
background-repeat: repeat-y;
background-position: left;
}

QFrame {
background: url(:/images/footer.png);
background-position: bottom left;
}

以上只是简单介绍一些常用的属性设置，具体的各种属性该怎样设置可以查看每个属性的类型，官方文档给出了很详细的每种属性设置的方式以及意义。

四、子控件

Qss除了对常用控件、窗体的样式进行设置，还可以对其子控件（如QComboBox的下拉按钮、QSpinBox的上下按钮等）的位置，填充图片等属性进行设置。此时可以使用控件名::子控件名来表示selector。例如：QComboBox::drop-down { image: url(dropdown.png) }用来设置QComboBox的下拉按钮的图片。更多的子控件名称如下表：

五、伪状态

Qt中有的控件会有许多状态，有时需要对不同状态进行区分（例如按钮的选中、按下等状态的区分），需要为不同的状态设置不同的样式。此时使用 控件名:状态名 表示selector。例如：QPushButton:hover { color: white }表示设置鼠标放在按钮上时按钮字体颜色。更多的状态名称见下表：

六、冲突处理机制

当多个样式规则用不同的值指定相同的属性时，考虑以下样式表:QPushButton#okButton { color: gray }    QPushButton { color: red } 。这两个规则都匹配名为okButton的QPushButton实例，并且对于color属性存在冲突。为了解决这个冲突，我们必须考虑选择器的特殊性。在上面的例子中，QPushButton#okButton被认为比QPushButton更具体，因为它(通常)引用一个对象，而不是一个类的所有实例。

所以当多个样式规则产生冲突时，系统会选择更具有针对性（特异性）的样式规则进行使用。而为了确定规则的特异性，Qt样式表遵循CSS2规范:

然后根据a*100+b*10+c计算出相应规则的特异性值。特异性值越大匹配性越好。

例如：

* {} /* a=0 b=0 c=0 -> specificity = 0 */
LI {} /* a=0 b=0 c=1 -> specificity = 1 */
UL LI {} /* a=0 b=0 c=2 -> specificity = 2 */
UL OL+LI {} /* a=0 b=0 c=3 -> specificity = 3 */
H1 + *[REL=up]{} /* a=0 b=1 c=1 -> specificity = 11 */
UL OL LI.red {} /* a=0 b=1 c=3 -> specificity = 13 */
LI.red.level {} /* a=0 b=2 c=1 -> specificity = 21 */
#x34y {} /* a=1 b=0 c=0 -> specificity = 100 */

七、示例

改示例主要是对Qt自带的Style sheet示例的修改。

//.h
#ifndef WIDGET_H
#define WIDGET_H
 
#include <QMainWindow>
#include <QApplication>
 
class Widget : public QMainWindow
{
    Q_OBJECT
 
public:
    Widget(QMainWindow *parent = nullptr);
    ~Widget();
};
#endif // WIDGET_H
 
 
//.cpp
#include "widget.h"
#include <QFrame>
#include <QLabel>
#include <QComboBox>
#include <QSpinBox>
#include <QLineEdit>
#include <QTextEdit>
#include <QCheckBox>
#include <QRadioButton>
#include <QHBoxLayout>
#include <QGridLayout>
#include <QGroupBox>
#include <QStringList>
#include <QDialogButtonBox>
#include <QFile>
#include <QMessageBox>
 
Widget::Widget(QMainWindow *parent)
    : QMainWindow(parent)
{
 
 
    QLabel *label1 = new QLabel("姓名:");
    label1->setProperty("class","mandatory");
    QComboBox *cmb1 = new QComboBox();
    cmb1->setObjectName("name");
    cmb1->setSizePolicy(QSizePolicy::Preferred,QSizePolicy::Fixed); //默认为双Preferred
 
    QLabel *label2 = new QLabel("性别:");
    QRadioButton *rbtn1 = new QRadioButton("男");
    QRadioButton *rbtn2 = new QRadioButton("女");
    QHBoxLayout *hlayout1 = new QHBoxLayout();
    hlayout1->addWidget(rbtn1);
    hlayout1->addWidget(rbtn2);
    hlayout1->addStretch(1);
    QGroupBox *groupBox = new QGroupBox();
    groupBox->setLayout(hlayout1);
 
    QLabel *label3 = new QLabel("  年龄:");
    QSpinBox *spinBox1 = new QSpinBox();
    spinBox1->setValue(22);
    spinBox1->setRange(18,45);
    spinBox1->setSingleStep(1);
    QHBoxLayout *hlayout2 = new QHBoxLayout();
    hlayout2->addWidget(spinBox1);
    hlayout2->addStretch(1);
 
    QLabel *label4 = new QLabel("密码:");
    QLineEdit *lineEdit1 =new QLineEdit("Password");
    lineEdit1->setEchoMode(QLineEdit::Password);
 
    QLabel *label5 = new QLabel("  国家:");
    QComboBox *cmb2 = new QComboBox();
    QStringList str;
    str<<"中国"<<"埃及"<<"法国"<<"德国"<<"意大利"<<"印度"<<"挪威"<<"巴基斯坦";
    cmb2->addItems(str);
    cmb2->setSizePolicy(QSizePolicy::Preferred,QSizePolicy::Fixed);
 
    QLabel *label6 = new QLabel("职业:");
    QTextEdit *textEdit1 = new QTextEdit("开发者");
    textEdit1->append("学生");
    textEdit1->append("创业者");
    textEdit1->setSizePolicy(QSizePolicy::Expanding,QSizePolicy::Expanding);
 
    QCheckBox *checkBox = new QCheckBox("我接受这些条款和条件!");
 
    QDialogButtonBox *dialogBtnBox = new QDialogButtonBox(QDialogButtonBox::Ok|QDialogButtonBox::Cancel);
 
    QGridLayout *glayout = new QGridLayout();
    glayout->addWidget(label1,0,0);
    glayout->addWidget(cmb1,0,1);
    glayout->addWidget(label2,1,0);
    glayout->addWidget(groupBox,1,1);
    glayout->addWidget(label3,2,0);
    glayout->addLayout(hlayout2,2,1);
    glayout->addWidget(label4,3,0);
    glayout->addWidget(lineEdit1,3,1);
    glayout->addWidget(label5,4,0);
    glayout->addWidget(cmb2,4,1);
    glayout->addWidget(label6,5,0);
    glayout->addWidget(textEdit1,5,1);
    glayout->addWidget(checkBox,6,0,1,2);
    glayout->addWidget(dialogBtnBox,7,0,1,2);
    glayout->setSizeConstraint(QLayout::SetDefaultConstraint);
 
    QString dirPath = QApplication::applicationDirPath();
    //QString fileName = dirPath+"/coffee.qss";
 
    QString fileName = "../qss/qss/coffee.qss";
    QFile qssFile(fileName);
    if(!qssFile.open(QFile::ReadOnly))
    {
 
        QMessageBox::warning(this,"打开文件失败",fileName+"打开失败");
        exit(1);
    }
    QString qssString = qssFile.readAll();
    this->setStyleSheet(qssString);
 
    QFrame *mframe = new QFrame();
    mframe->setLayout(glayout);
    this->setCentralWidget(mframe);
}
 
Widget::~Widget()
{
}
 

.qss文件

Widget {
   background-color: beige;
}
 
 
/* Nice Windows-XP-style password character. */
QLineEdit[echoMode="2"] {
    lineedit-password-character: 9679;
}
 
/* We provide a min-width and min-height for push buttons
   so that they look elegant regardless of the width of the text. */
QPushButton {
    background-color: palegoldenrod;
    border-width: 2px;
    border-color: darkkhaki;
    border-style: solid;
    border-radius: 5;
    padding: 3px;
    min-width: 9ex;
    min-height: 2.5ex;
}
 
QPushButton:hover {
   background-color: khaki;
}
 
/* Increase the padding, so the text is shifted when the button is
   pressed. */
QPushButton:pressed {
    padding-left: 5px;
    padding-top: 5px;
    background-color: #d0d67c;
}
 
QLabel, QAbstractButton {
    font: bold;
}
 
/* Mark mandatory fields with a brownish color. */
.mandatory {
    color: brown;
}
 
/* Bold text on status bar looks awful. */
QStatusBar QLabel {
   font: normal;
}
 
QStatusBar::item {
    border-width: 1;
    border-color: darkkhaki;
    border-style: solid;
    border-radius: 2;
}
 
QComboBox, QLineEdit, QSpinBox, QTextEdit, QListView {
    background-color: cornsilk;
    selection-color: #0a214c; 
    selection-background-color: #C19A6B;
}
 
QComboBox::drop-down#name{
    image:url(:/res/drop_down.jpg);
}
 
QListView {
    show-decoration-selected: 1;
}
 
QListView::item:hover {
    background-color: wheat;
}
 
/* We reserve 1 pixel space in padding. When we get the focus,
   we kill the padding and enlarge the border. This makes the items
   glow. */
QFrame{
    /*background-color: beige;*/
    margin:10px;
}
 
QLineEdit, QFrame {
    border-width: 2px;
    padding: 1px;
    border-style: solid;
    border-color: darkkhaki;
    border-radius: 5px;
}
 
/* As mentioned above, eliminate the padding and increase the border. */
QLineEdit:focus, QFrame:focus {
    border-width: 3px;
    padding: 0px;
}
 
/* A QLabel is a QFrame ... */
QLabel {
    border: none;
    padding: 0;
    background: none;
}
 
/* A QToolTip is a QLabel ... */
QToolTip {
    border: 2px solid darkkhaki;
    padding: 5px;
    border-radius: 3px;
    opacity: 200;
}
 
/* Nice to have the background color change when hovered. */
QRadioButton:hover, QCheckBox:hover {
    background-color: wheat;
}
 
/* Force the dialog's buttons to follow the Windows guidelines. */
QDialogButtonBox {
    button-layout: 0;
}

效果图：

转自：使用Qss设置窗体样式_cloud_yq的博客-CSDN博客_qss设置样式