Qt样式表之二：QSS语法及常用样式

Qt样式表（以下统称QSS）的术语和语法规则几乎和CSS相同。如果你熟悉CSS，可以快速浏览以下内容。不熟悉的话可以先去W3School - CSS或者本人的CSS博客随笔简单了解一下。

在讲解样式表语法前，我们先看一个例子：

上面例子是实现按钮三态效果的样式表。

注：程序设置的样式表比ui文件里设置的优先级更高。

QSS包含了一个样式规则，一个样式规则由一个选择器和声明组成，选择器指定哪些部件由规则影响，声明指定哪些属性应该在部件上进行设置。例如：

上面的例子中QPushButton是选择器，{ color: red }是声明，该规则指定QPushButton及其子类（例如：MyPushButton）应使用红色作为前景色。

几个选择器可以指定相同的声明，使用逗号（,）来分隔选择器。例如：

相当于三个规则序列：

声明部分的规则是一个属性值对（property: value）列表，包含在花括号中，以分号分隔。例如：

参考助手：Qt Style Sheets Reference中List of Properties部分。

注：QSS通常不区分大小写（即：color、Color、COLOR、cOloR指同一属性），唯一例外就是类名（class names）、对象名（object names）、属性名（property names）区分大小写。

下表总结了最有用的选择器，所有示例使用了选择器中最简单的类型，类型选择器QSS支持所有的selectors defined in CSS2。

对于样式复杂的部件，需要访问子控件，例如：QComboBox的下拉按钮或QSpinBox的上下箭头。选择器可能包含子控件，使得可以限制特有部件子控件的应用规则。例如：

上述规则指定了QComboBoxe下拉按钮样式，虽然双冒号（::）语法让人想起CSS3伪元素，但Qt子控件从概念上讲有不同的级联语义。

子控件定位总是相对于另一个参考元素，这个参考元素可能是小部件或其它子控件。例如：QComboBox的::drop-down放置，默认的放置在QComboBox区域的右上角。而::drop-down放置，默认的在::drop-down子控件的中央。

width和height属性可用于控制子控件的大小，注意：设置一个图片会隐式地设置子控件的大小。相对定位（position : relative）：可以改变子控件相对初始位置的偏移量。例如：按下QComboBox下拉按钮时，我们可能更喜欢用内部箭头偏移量来产生一个被按下的效果。要做到这一点，我们可以指定：

绝对定位（position : absolute）：允许子控件改变位置和的大小而不受参考元素限制。

参考助手：Qt Style Sheets Reference中List of Sub-Controls部分，及Qt Style Sheets Examples中Customizing the QPushButton's Menu Indicator Sub-Control部分。

选择器可以包含伪状态，意味着限制基于部件状态的应用程序规则。伪状态出现在选择器后面，用冒号（:）关联。例如，鼠标划过按钮：

伪状态可以用感叹号（!）运算符表示否定。例如，当鼠标不划过QRadioButton：

伪状态可以连接使用，这种情况下，相当于隐含了一个逻辑与。例如，当鼠标滑过选中的QCheckBox：

否定的伪状态也可以连接使用，例如，当鼠标划过一个非按下时按钮：

如果需要，也可以使用逗号操作来表示逻辑或：

伪状态也可以与子控件组合，例如：

参见助手：Qt Style Sheets Reference中List of Pseudo-States部分。

示例一

当样式中指定相同的属性具有不同的值时，就会出现冲突。例如：

要解决这个冲突，必须考虑到的选择器的特殊性。上面的例子，QPushButton＃okButton 被认为比 QPushButton 更具体，因为它通常是指单个对象，而不是一类的所有实例。所以 okButton 这个按钮文本颜色会设置为blue，而其它按钮文本仍然设置为red。

示例二

同样的，利用伪状态比不指定伪状态那些选择器更具体。因此，下面的样式指定一个QPushButton应该有鼠标悬停文本颜色为白色，否则文本颜色为红色。

示例三

这里，两个选择器有相同的特殊性，但后一条规则优先，即QPushButton:enabled { color: red }优先级更高，所以按钮默认 enabled 的情况下，无论鼠标是否悬停在按钮上，文本颜色始终为白色。

想要鼠标是否悬停在按钮上文本颜色为白色，根据后面规则优先级更高的原则，则使颜色为white的规则在后面即可，如上所示。

或者，可以使文本颜色为白色的规则更加具体：

示例四

类似的问题出现在类型选择器一起使用。请看下面的例子：

两个规则应用于 QPushButton 实例（因为 QPushButton 继承自 QAbstractButton）并有color属性的冲突。因为 QPushButton 继承 QAbstractButton，所以 QPushButton 比 QAbstractButton 更具体，本应该按钮文本颜色为红色。然而，对于QSS的计算，所有的类型选择具有相同的特殊性，最后出现的规则优先，所以实际上按钮文本颜色为蓝色。如果需要设置QPushButtons为红色文字，需要重新排序规则。

总结

为了确定一个规则的特殊性，QSS遵循CSS2规范，一个选择器的特殊性的计算方法如下：

串联的三个数字a-b-c（在具有大基数的数字系统）给出的特殊性。一些例子如下：

QSS可以在QApplication、父部件、子部件中设置。冲突发生时，不论冲突规则的特殊性，部件自身的样式表总优先于任何继承样式表。考虑下面的例子。首先，我们在QApplication中设置样式表：

然后，我们设置QPushButton的样式表：

QPushButton样式表强制QPushButton（以及任何子部件）显示蓝色文字，尽管应用程序范围内的样式表提供的规则更具体。

在经典的CSS中，当字体和颜色没有明确设置时，它就会自动从父继承。当使用QSS时，部件不会自动从父继承字体和颜色。例如，一个QGroupBox中包含QPushButton：

QPushButton不会继承其父QGroupBox的颜色，而是显示系统的颜色。

以上是建议书写方式，但也可以使用常规书写方式，如下表所示:

其他框线样式如下：

注：px:相对长度单位，像素（Pixel）。pt:绝对长度单位，点（Point）。

参考：

Qt css样式大全(整理版）