【翻译 + 整理】Qt样式表详解（1）：原理
一、概述
1、样式表是文本规范，可以使用QApplication::setStyleShee()在整个应用程序上设置，也可以使用QWidget::setStyleSheet()在特定的小部件（及其子控件）上设置。
2、如果在不同级别上设置了多个样式表，则Qt将从所有已设置的样式表中得出有效样式表。 这称为级联。
例如，以下样式表指定所有QLineEdits应该使用黄色作为背景色，所有QCheckBoxes应该使用红色作为文本色：
QLineEdit { background: yellow }
QCheckBox { color: red }
3、样式表比QPalette强大得多。例如，QPalette::Button角色设置为红色，以使QPushButton获得红色按钮。但是，这不能保证适用于所有样式，因为受不同平台的限制，并且（在Windows和macOS上）受本机主题引擎的限制。样式表使您可以执行仅使用QPalette难以执行或无法执行的各种自定义。
4、样式表被应用在当前小部件样式的顶层，这意味着您的应用程序看起来将尽可能本机化。与调色板不同，样式表可提供以下保证：如果将QPushButton的背景色设置为红色，则可以确保在所有平台上，该按钮在所有样式中均具有红色背景。此外，Qt Designer提供了样式表集成，使您可以轻松地查看不同小部件样式的样式表的效果。
5、样式表可用于为您的应用程序提供独特的外观，而不必继承QStyle。
二、样式表语法
Qt样式表的术语和语法规则与HTML CSS几乎相同。
2.1、样式规则
1、样式表由一系列样式规则组成。样式规则由选择器和声明组成。
- 选择器指定受规则影响的窗口小部件
- 声明指定应在窗口小部件上设置的属性
例如：
QPushButton { color: red }
在上面的样式规则中，QPushButton是选择器，{color：red}是声明。
2、Qt样式表通常不区分大小写（即，color，Color，COLOR和cOloR表示相同的属性）。唯一的例外是类名、对象名和Qt属性名，它们区分大小写。
3、可以为同一声明指定多个选择器，使用逗号（,）分隔选择器。 例如：
QPushButton, QLineEdit, QComboBox { color: red }
和下面是相同的：
QPushButton { color: red }
QLineEdit { color: red }
QComboBox { color: red }
4、样式规则的声明部分是属性：值列表，用大括号括起来并用分号分隔。 例如：
QPushButton { color: red; background-color: white }
2.2、选择器类型
Qt样式表支持CSS2中定义的所有选择器。下面是最常用的选择器类型：
- 通用选择器（例如：*）：匹配所有小部件。
- 类型选择器（例如：QPushButton）：匹配QPushButton及其子类的实例。
- 属性选择器（例如：QPushButton[flat="false"]）：匹配QPushButton类型属性（使用Q_PROPERTY注册的属性）等于给定值的实例。（除了等号还可以使用〜=来测试QStringList类型的Qt属性是否包含给定的QString）如果在设置样式表后Qt属性的值发生更改，那么应该重新设置样式表。
- 类选择器（例如：.QPushButton）：匹配QPushButton的实例，但不匹配其子类。这等效于* [class〜="QPushButton"]。
- ID选择器（例如：QPushButton#okButton）：匹配objectName为"okButton"的所有QPushButton实例。
- 后代选择器（例如：QWidget QPushButton）：只要QPushButton对象是QWidget对象的子孙对象就匹配（注意这里指的是对象树的子孙对象而不是子类对象）。
- 子选择器（例如：QWidget > QPushButton）：匹配QWidget直接子对象中的QPushButton对象（只匹配对象树的第一层的子对象）。
2.3、子控件
1、对于样式复杂的窗口小部件，必须可以访问该窗口小部件的子控件，例如QComboBox的下拉按钮或QSpinBox的向上和向下箭头。 选择器可能包含子控件，这些子控件可以将规则的应用限制到特定的窗口小部件子控件。 例如：
QComboBox::drop-down { image: url(dropdown.png) }
2、子控件始终相对于另一个元素（参考元素）定位。 该参考元素可以是小部件或另一个子控件。 例如，默认情况下，QComboBox的::drop-down是放置在QComboBox的Padding矩形的右上角的。
2.4、伪状态
1、选择器可能包含伪状态，这些伪状态表示基于小部件的状态来限制规则的应用。伪状态出现在选择器的末尾，中间有一个冒号（:)。
例如，当鼠标悬停在QPushButton上时，将应用以下规则：
QPushButton:hover { color: white }
2、可以使用感叹号运算符否定伪状态。 例如，当鼠标没有悬停在QRadioButton上时，将应用以下规则：
QRadioButton:!hover { color: red }
3、伪状态可以进行逻辑“与”操作。例如，以下规则适用于鼠标悬停在选中的QCheckBox上方的情况：
QCheckBox:hover:checked { color: white }
又例如，当鼠标悬停在未按下的QPushButton上时，将应用以下规则：
QPushButton:hover:!pressed { color: blue; }
4、可以使用逗号运算符表示逻辑或：
QCheckBox:hover, QCheckBox:checked { color: white }
5、伪状态可以与子控件组合出现。 例如：
QComboBox::drop-down:hover { image: url(dropdown_bright.png) }
2.4、冲突处理规则
当多个样式规则使用不同的值指定相同的属性时，就会发生冲突。 例如：
QPushButton#okButton { color: gray }
QPushButton { color: red }
1、这两个规则都匹配objectName为okButton的QPushButton实例，并且color属性存在冲突。 要解决此冲突，我们必须考虑选择器的特殊性。 在上面的示例中，QPushButton＃okButton被认为比QPushButton更具体，因为它（通常）引用单个对象，而不是类的所有实例。
2、具有伪状态的选择器比未指定伪状态的选择器更具体（这条规则仅适用于伪状态）。 因此，以下样式表指定当鼠标悬停在QPushButton上时QPushButton应该具有白色文本，否则为红色文本：
QPushButton:hover { color: white }
QPushButton { color: red }
3、多个伪状态的情况：
QPushButton:hover { color: white }
QPushButton:enabled { color: red }
这设置的顺序有关，后面的比前面的优先。enabled状态的颜色覆盖了hover状态的颜色。（hover的范围比enabled的范围小）
要想不覆盖把范围小的放在后面就行：
QPushButton:enabled { color: red }
QPushButton:hover { color: white }
或者使用“与”逻辑：
QPushButton:hover:enabled { color: white }
QPushButton:enabled { color: red }
4、类型选择器的情况：
QPushButton { color: red }
QAbstractButton { color: gray }
后设置的更有优先性，所有按钮颜色都被设为gray。
2.5、级联
可以在QApplication，父窗口小部件和子窗口小部件上设置样式表。
当发生冲突时，无论冲突规则的特殊性如何，始终要优先于任何继承的样式表使用窗口小部件自身的样式表。同样，父小部件的样式表比祖父小部件的样式表更受青睐，依此类推。
2.6、继承
默认情况下，使用Qt样式表时，窗口小部件不会自动从其父窗口小部件继承其字体和颜色设置。
例如，QGroupBox中的QPushButton：
qApp->setStyleSheet("QGroupBox { color: red; } ");QPushButton没有显式的颜色设置。因此，它具有系统颜色，而不是继承其父QGroupBox的颜色。 如果要在QGroupBox及其子级上设置颜色，可以编写：
qApp->setStyleSheet("QGroupBox, QGroupBox * { color: red; }");相反，使用QWidget::setFont()和QWidget::setPalette()设置字体和调色板会传播到子窗口小部件（因为默认设置了Qt::AA_UseStyleSheetPropagationInWidgetStyles属性）。
2.7、C ++命名空间中的小部件
类型选择器可用于为特定类型的小部件设置样式。 例如：
class MyPushButton : public QPushButton {
// ...
}
// ...
qApp->setStyleSheet("MyPushButton { background: yellow; }");Qt样式表使用小部件的QObject::className()来确定何时应用类型选择器。 当自定义窗口小部件位于名称空间内时，QObject::className()返回
namespace ns {
class MyPushButton : public QPushButton {
// ...
}
}
// ...
qApp->setStyleSheet("ns--MyPushButton { background: yellow; }");2.8、设置QObject属性
可以使用qproperty-
MyLabel { qproperty-pixmap: url(pixmap.png); }
MyGroupBox { qproperty-titleColor: rgb(100, 200, 100); }
QPushButton { qproperty-iconSize: 20px 20px; }
如果属性引用使用Q_ENUMS声明的枚举，则应按名称引用其常量，即不引用其数值。
三、使用样式表自定义Qt小部件
3.1、盒子模式
1、使用样式表时，每个小部件都被视为一个具有四个同心矩形的框：边距矩形、边框矩形、填充矩形和内容矩形。
2、边距（margin），边框宽度（border-width）和填充（padding）属性均默认为零。 在这种情况下，所有四个矩形（边距，边框，填充和内容）都完全重合。
3、可以使用background-image属性为小部件指定背景。 默认情况下，仅在边框内的区域绘制背景图像。
4、背景图像无法随窗口小部件的大小缩放。 为了提供与小部件尺寸一起缩放的“外观”或背景，必须使用边框图像border-image属性。 由于border-image属性提供了背景，因此在指定border-image时不需要指定背景图像。 在这种情况下，如果同时指定了两者，则边框图像将覆盖背景图像。
5、图像（image）属性可用于在边框图像上绘制图像。指定的图像不会平铺或拉伸，并且当其大小与小部件的大小不匹配时，将使用image-position属性指定其对齐方式。 与背景图像和边框图像不同，可以在image属性中指定SVG，在这种情况下，图像会根据小部件的大小自动缩放。
3.2、子控件
1、小部件被视为彼此重叠绘制的子控件的层次结构（树）。 例如QComboBox绘制下拉子控件，然后是向下箭头子控件。 因此，QComboBox呈现如下：
- 渲染QComboBox {}规则
- 渲染QComboBox::drop-down{}规则
- 渲染QComboBox::down-arrow {}规则
2、子控件共享父子关系。 对于QComboBox，down-arrow的父项是下拉子控件（drop-down），而drop-down的父项就是QComboBox本身。子控件通过subcontrol-position（子控件位置）和subcontrol-origin属性放置在其父级中。