![](http://static.blog.csdn.net/images/category_icon.jpg)
简述
Qt样式表(以下统称QSS)的术语和语法规则几乎和CSS相同。如果你熟悉CSS,可以快速浏览以下内容。
样式规则
QSS包含了一个样式规则序列,一个样式规则由一个选择器和声明组成,选择器指定哪些部件由规则影响,声明指定哪些属性应该在部件上进行设置。例如:
<code class="language-Qt hljs css has-numbering" style="display: block; padding: 0px; background: transparent; color: inherit; box-sizing: border-box; font-family: "Source Code Pro", monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal;"><span class="hljs-tag" style="color: rgb(0, 0, 0); box-sizing: border-box;">QPushButton</span> <span class="hljs-rules" style="box-sizing: border-box;">{ <span class="hljs-rule" style="box-sizing: border-box;"><span class="hljs-attribute" style="box-sizing: border-box;">color</span>:<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 102, 102);"> red </span></span></span>}</code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; background-color: rgb(238, 238, 238); top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right: 1px solid rgb(221, 221, 221); list-style: none; text-align: right;"><li style="box-sizing: border-box; padding: 0px 5px;">1</li></ul>
上面的例子中QPushButton是选择器,{ color: red }是声明,该规则指定QPushButton及其子类(例如:MyPushButton)应使用红色作为前景色。
QSS通常不区分大小写(即:color、Color、COLOR、cOloR指同一属性),唯一例外就是类名(class names)、对象名(object names)、属性名(property names)区分大小写。
几个选择器可以指定相同的声明,使用逗号(,)来分隔选择器。例如:
<code class="language-Qt hljs css has-numbering" style="display: block; padding: 0px; background: transparent; color: inherit; box-sizing: border-box; font-family: "Source Code Pro", monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal;"><span class="hljs-tag" style="color: rgb(0, 0, 0); box-sizing: border-box;">QPushButton</span>, <span class="hljs-tag" style="color: rgb(0, 0, 0); box-sizing: border-box;">QLineEdit</span>, <span class="hljs-tag" style="color: rgb(0, 0, 0); box-sizing: border-box;">QComboBox</span> <span class="hljs-rules" style="box-sizing: border-box;">{ <span class="hljs-rule" style="box-sizing: border-box;"><span class="hljs-attribute" style="box-sizing: border-box;">color</span>:<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 102, 102);"> red </span></span></span>}</code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; background-color: rgb(238, 238, 238); top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right: 1px solid rgb(221, 221, 221); list-style: none; text-align: right;"><li style="box-sizing: border-box; padding: 0px 5px;">1</li></ul>
相当于三个规则序列:
<code class="language-Qt hljs css has-numbering" style="display: block; padding: 0px; background: transparent; color: inherit; box-sizing: border-box; font-family: "Source Code Pro", monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal;"><span class="hljs-tag" style="color: rgb(0, 0, 0); box-sizing: border-box;">QPushButton</span> <span class="hljs-rules" style="box-sizing: border-box;">{ <span class="hljs-rule" style="box-sizing: border-box;"><span class="hljs-attribute" style="box-sizing: border-box;">color</span>:<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 102, 102);"> red </span></span></span>} <span class="hljs-tag" style="color: rgb(0, 0, 0); box-sizing: border-box;">QLineEdit</span> <span class="hljs-rules" style="box-sizing: border-box;">{ <span class="hljs-rule" style="box-sizing: border-box;"><span class="hljs-attribute" style="box-sizing: border-box;">color</span>:<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 102, 102);"> red </span></span></span>} <span class="hljs-tag" style="color: rgb(0, 0, 0); box-sizing: border-box;">QComboBox</span> <span class="hljs-rules" style="box-sizing: border-box;">{ <span class="hljs-rule" style="box-sizing: border-box;"><span class="hljs-attribute" style="box-sizing: border-box;">color</span>:<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 102, 102);"> red </span></span></span>}</code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; background-color: rgb(238, 238, 238); top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right: 1px solid rgb(221, 221, 221); list-style: none; text-align: right;"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li></ul>
声明部分的规则是一个属性值对(property: value)列表,包含在花括号中,以分号分隔。例如:
<code class="language-Qt hljs css has-numbering" style="display: block; padding: 0px; background: transparent; color: inherit; box-sizing: border-box; font-family: "Source Code Pro", monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal;"><span class="hljs-tag" style="color: rgb(0, 0, 0); box-sizing: border-box;">QPushButton</span> <span class="hljs-rules" style="box-sizing: border-box;">{ <span class="hljs-rule" style="box-sizing: border-box;"><span class="hljs-attribute" style="box-sizing: border-box;">color</span>:<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 102, 102);"> red</span></span>; <span class="hljs-rule" style="box-sizing: border-box;"><span class="hljs-attribute" style="box-sizing: border-box;">background-color</span>:<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 102, 102);"> white </span></span></span>}</code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; background-color: rgb(238, 238, 238); top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right: 1px solid rgb(221, 221, 221); list-style: none; text-align: right;"><li style="box-sizing: border-box; padding: 0px 5px;">1</li></ul>
参考助手:Qt Style Sheets Reference
中List of Properties
部分。
选择器类型
目前为止,所有的示例使用选择器中最简单的类型,类型选择器。QSS支持所有的selectors defined in CSS2。下表总结了最有用的类型选择器。
选择器 | 示例 | 说明 |
---|---|---|
通用选择器 | * | 匹配所有部件 |
类型选择器 | QPushButton | 匹配QPushButton及其子类的实例 |
属性选择器 | QPushButton[flat=”false”] | 匹配QPushButton中flat属性为false的实例。可以用此选择器来测试任何支持QVariant::toString() 的属性,此外,支持特殊的类属性、类名称。此选择器也可以用来测试动态属性(参考助手:Qt Style Sheets Examples 中Customizing Using Dynamic Properties 部分)。还可以使用~=替换=,测试QStringList类型的属性是否包含给定的QString。 警告:如果Qt属性值在设置样式之后更改,那么可能需要强制重新计算样式。实现的一个方法是取消样式,然后重新设置一遍。 |
类选择器 | .QPushButton | 匹配QPushButton的实例,但不包含子类。相当于*[class~=”QPushButton”]。 |
ID选择器 | QPushButton#okButton | 匹配所有objectName为okButton的QPushButton实例。 |
后代选择器 | QDialog QPushButton | 匹配属于QDialog后代(孩子,孙子等)的QPushButton所有实例。 |
子选择器 | QDialog > QPushButton | 匹配属于QDialog直接子类的QPushButton所有实例。 |
子控件
对于样式复杂的部件,需要访问子控件,例如:QComboBox的下拉按钮或QSpinBox的上下箭头。选择器可能包含子控件,使得可以限制特有部件子控件的应用规则。例如:
<code class="language-Qt hljs css has-numbering" style="display: block; padding: 0px; background: transparent; color: inherit; box-sizing: border-box; font-family: "Source Code Pro", monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal;"><span class="hljs-tag" style="color: rgb(0, 0, 0); box-sizing: border-box;">QComboBox</span><span class="hljs-pseudo" style="color: rgb(0, 0, 0); box-sizing: border-box;">::drop-down</span> <span class="hljs-rules" style="box-sizing: border-box;">{ <span class="hljs-rule" style="box-sizing: border-box;"><span class="hljs-attribute" style="box-sizing: border-box;">image</span>:<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 102, 102);"> <span class="hljs-function" style="box-sizing: border-box;">url(dropdown.png)</span> </span></span></span>}</code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; background-color: rgb(238, 238, 238); top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right: 1px solid rgb(221, 221, 221); list-style: none; text-align: right;"><li style="box-sizing: border-box; padding: 0px 5px;">1</li></ul>
上述规则指定了QComboBoxe下拉按钮样式,虽然双冒号(::)语法让人想起CSS3伪元素,但Qt子控件从概念上讲有不同的级联语义。
子控件定位总是相对于另一个参考元素。这个参考元素可能是小部件或其它子控件。例如:QComboBox的::drop-down放置,默认的放置在QComboBox区域的右上角,::drop-down放置,默认的在::drop-down子控件的中央,参考助手:Qt Style Sheets Reference
中List of Stylable Widgets
部分。
可以使用subcontrol-origin改变子控件原始的默认位置,
<code class="language-Qt hljs css has-numbering" style="display: block; padding: 0px; background: transparent; color: inherit; box-sizing: border-box; font-family: "Source Code Pro", monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal;"><span class="hljs-tag" style="color: rgb(0, 0, 0); box-sizing: border-box;">QComboBox</span> <span class="hljs-rules" style="box-sizing: border-box;">{ <span class="hljs-rule" style="box-sizing: border-box;"><span class="hljs-attribute" style="box-sizing: border-box;">margin-right</span>:<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 102, 102);"> <span class="hljs-number" style="box-sizing: border-box;">20</span>px</span></span>; <span class="hljs-rule" style="box-sizing: border-box;">}</span></span> <span class="hljs-tag" style="color: rgb(0, 0, 0); box-sizing: border-box;">QComboBox</span><span class="hljs-pseudo" style="color: rgb(0, 0, 0); box-sizing: border-box;">::drop-down</span> <span class="hljs-rules" style="box-sizing: border-box;">{ <span class="hljs-rule" style="box-sizing: border-box;"><span class="hljs-attribute" style="box-sizing: border-box;">subcontrol-origin</span>:<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 102, 102);"> margin</span></span>; <span class="hljs-rule" style="box-sizing: border-box;">}</span></span></code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; background-color: rgb(238, 238, 238); top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right: 1px solid rgb(221, 221, 221); list-style: none; text-align: right;"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li></ul>
下拉的对齐方式可以通过subcontrol-position属性改变。
width和height属性可用于控制子控件的大小,注意:设置一个图片会隐式地设置子控件的大小。
相对定位(position : relative):可以改变子控件相对初始位置的偏移量。例如:按下QComboBox下拉按钮时,我们可能更喜欢用内部箭头偏移量来产生一个被按下的效果。要做到这一点,我们可以指定:
<code class="language-Qt hljs css has-numbering" style="display: block; padding: 0px; background: transparent; color: inherit; box-sizing: border-box; font-family: "Source Code Pro", monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal;"><span class="hljs-tag" style="color: rgb(0, 0, 0); box-sizing: border-box;">QComboBox</span><span class="hljs-pseudo" style="color: rgb(0, 0, 0); box-sizing: border-box;">::down-arrow</span> <span class="hljs-rules" style="box-sizing: border-box;">{ <span class="hljs-rule" style="box-sizing: border-box;"><span class="hljs-attribute" style="box-sizing: border-box;">image</span>:<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 102, 102);"> <span class="hljs-function" style="box-sizing: border-box;">url(down_arrow.png)</span></span></span>; <span class="hljs-rule" style="box-sizing: border-box;">}</span></span> <span class="hljs-tag" style="color: rgb(0, 0, 0); box-sizing: border-box;">QComboBox</span><span class="hljs-pseudo" style="color: rgb(0, 0, 0); box-sizing: border-box;">::down-arrow</span><span class="hljs-pseudo" style="color: rgb(0, 0, 0); box-sizing: border-box;">:pressed</span> <span class="hljs-rules" style="box-sizing: border-box;">{ <span class="hljs-rule" style="box-sizing: border-box;"><span class="hljs-attribute" style="box-sizing: border-box;">position</span>:<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 102, 102);"> relative</span></span>; <span class="hljs-rule" style="box-sizing: border-box;"><span class="hljs-attribute" style="box-sizing: border-box;">top</span>:<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 102, 102);"> <span class="hljs-number" style="box-sizing: border-box;">1</span>px</span></span>; <span class="hljs-rule" style="box-sizing: border-box;"><span class="hljs-attribute" style="box-sizing: border-box;">left</span>:<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 102, 102);"> <span class="hljs-number" style="box-sizing: border-box;">1</span>px</span></span>; <span class="hljs-rule" style="box-sizing: border-box;">}</span></span></code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; background-color: rgb(238, 238, 238); top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right: 1px solid rgb(221, 221, 221); list-style: none; text-align: right;"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li><li style="box-sizing: border-box; padding: 0px 5px;">7</li></ul>
绝对定位(position : absolute):允许子控件改变位置和的大小而不受参考元素限制。一旦位置被设定,这些子控件将被和普通部件(widgets)视为相同,并且可以使用盒模型样式(参考助手:Customizing Qt Widgets Using Style Sheets
中The Box Model
部分)。
参考助手:Qt Style Sheets Reference
中List of Sub-Controls
部分,及Qt Style Sheets Examples
中Customizing the QPushButton's Menu Indicator Sub-Control
部分。
注意:对于复杂的部件,如:QComboBox和QScrollBar,如果一个属性或子控件被定制,所有其它属性或子控件必须被定制好。
伪选择器
选择器可以包含伪状态,意味着限制基于部件状态的应用程序规则。伪状态出现在选择器后面,用冒号(:)关联。例如,鼠标划过按钮:
<code class="language-Qt hljs css has-numbering" style="display: block; padding: 0px; background: transparent; color: inherit; box-sizing: border-box; font-family: "Source Code Pro", monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal;"><span class="hljs-tag" style="color: rgb(0, 0, 0); box-sizing: border-box;">QPushButton</span><span class="hljs-pseudo" style="color: rgb(0, 0, 0); box-sizing: border-box;">:hover</span> <span class="hljs-rules" style="box-sizing: border-box;">{ <span class="hljs-rule" style="box-sizing: border-box;"><span class="hljs-attribute" style="box-sizing: border-box;">color</span>:<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 102, 102);"> white </span></span></span>}</code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; background-color: rgb(238, 238, 238); top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right: 1px solid rgb(221, 221, 221); list-style: none; text-align: right;"><li style="box-sizing: border-box; padding: 0px 5px;">1</li></ul>
伪状态可以用感叹号(!)运算符表示否定。例如,当鼠标不划过QRadioButton:
<code class="language-Qt hljs css has-numbering" style="display: block; padding: 0px; background: transparent; color: inherit; box-sizing: border-box; font-family: "Source Code Pro", monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal;"><span class="hljs-tag" style="color: rgb(0, 0, 0); box-sizing: border-box;">QRadioButton</span>:!<span class="hljs-tag" style="color: rgb(0, 0, 0); box-sizing: border-box;">hover</span> <span class="hljs-rules" style="box-sizing: border-box;">{ <span class="hljs-rule" style="box-sizing: border-box;"><span class="hljs-attribute" style="box-sizing: border-box;">color</span>:<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 102, 102);"> red </span></span></span>}</code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; background-color: rgb(238, 238, 238); top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right: 1px solid rgb(221, 221, 221); list-style: none; text-align: right;"><li style="box-sizing: border-box; padding: 0px 5px;">1</li></ul>
伪状态可以连接使用,这种情况下,相当于隐含了一个逻辑与。例如,当鼠标滑过选中的QCheckBox:
<code class="language-Qt hljs css has-numbering" style="display: block; padding: 0px; background: transparent; color: inherit; box-sizing: border-box; font-family: "Source Code Pro", monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal;"><span class="hljs-tag" style="color: rgb(0, 0, 0); box-sizing: border-box;">QCheckBox</span><span class="hljs-pseudo" style="color: rgb(0, 0, 0); box-sizing: border-box;">:hover</span><span class="hljs-pseudo" style="color: rgb(0, 0, 0); box-sizing: border-box;">:checked</span> <span class="hljs-rules" style="box-sizing: border-box;">{ <span class="hljs-rule" style="box-sizing: border-box;"><span class="hljs-attribute" style="box-sizing: border-box;">color</span>:<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 102, 102);"> white </span></span></span>}</code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; background-color: rgb(238, 238, 238); top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right: 1px solid rgb(221, 221, 221); list-style: none; text-align: right;"><li style="box-sizing: border-box; padding: 0px 5px;">1</li></ul>
否定的伪状态也可以连接使用,例如,当鼠标划过一个非按下时按钮:
<code class="language-Qt hljs css has-numbering" style="display: block; padding: 0px; background: transparent; color: inherit; box-sizing: border-box; font-family: "Source Code Pro", monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal;"><span class="hljs-tag" style="color: rgb(0, 0, 0); box-sizing: border-box;">QPushButton</span><span class="hljs-pseudo" style="color: rgb(0, 0, 0); box-sizing: border-box;">:hover</span>:!<span class="hljs-tag" style="color: rgb(0, 0, 0); box-sizing: border-box;">pressed</span> <span class="hljs-rules" style="box-sizing: border-box;">{ <span class="hljs-rule" style="box-sizing: border-box;"><span class="hljs-attribute" style="box-sizing: border-box;">color</span>:<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 102, 102);"> blue</span></span>; <span class="hljs-rule" style="box-sizing: border-box;">}</span></span></code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; background-color: rgb(238, 238, 238); top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right: 1px solid rgb(221, 221, 221); list-style: none; text-align: right;"><li style="box-sizing: border-box; padding: 0px 5px;">1</li></ul>
如果需要,也可以使用逗号操作来表示逻辑或:
<code class="language-Qt hljs css has-numbering" style="display: block; padding: 0px; background: transparent; color: inherit; box-sizing: border-box; font-family: "Source Code Pro", monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal;"><span class="hljs-tag" style="color: rgb(0, 0, 0); box-sizing: border-box;">QCheckBox</span><span class="hljs-pseudo" style="color: rgb(0, 0, 0); box-sizing: border-box;">:hover</span>, <span class="hljs-tag" style="color: rgb(0, 0, 0); box-sizing: border-box;">QCheckBox</span><span class="hljs-pseudo" style="color: rgb(0, 0, 0); box-sizing: border-box;">:checked</span> <span class="hljs-rules" style="box-sizing: border-box;">{ <span class="hljs-rule" style="box-sizing: border-box;"><span class="hljs-attribute" style="box-sizing: border-box;">color</span>:<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 102, 102);"> white </span></span></span>}</code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; background-color: rgb(238, 238, 238); top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right: 1px solid rgb(221, 221, 221); list-style: none; text-align: right;"><li style="box-sizing: border-box; padding: 0px 5px;">1</li></ul>
伪状态也可以与子控件组合,例如:
<code class="language-Qt hljs css has-numbering" style="display: block; padding: 0px; background: transparent; color: inherit; box-sizing: border-box; font-family: "Source Code Pro", monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal;"><span class="hljs-tag" style="color: rgb(0, 0, 0); box-sizing: border-box;">QComboBox</span><span class="hljs-pseudo" style="color: rgb(0, 0, 0); box-sizing: border-box;">::drop-down</span><span class="hljs-pseudo" style="color: rgb(0, 0, 0); box-sizing: border-box;">:hover</span> <span class="hljs-rules" style="box-sizing: border-box;">{ <span class="hljs-rule" style="box-sizing: border-box;"><span class="hljs-attribute" style="box-sizing: border-box;">image</span>:<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 102, 102);"> <span class="hljs-function" style="box-sizing: border-box;">url(dropdown_bright.png)</span> </span></span></span>}</code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; background-color: rgb(238, 238, 238); top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right: 1px solid rgb(221, 221, 221); list-style: none; text-align: right;"><li style="box-sizing: border-box; padding: 0px 5px;">1</li></ul>
参见助手:Qt Style Sheets Reference
中List of Pseudo-States
部分。
解决冲突
当样式中指定相同的属性具有不同的值时,就会出现冲突。例如:
<code class="language-Qt hljs css has-numbering" style="display: block; padding: 0px; background: transparent; color: inherit; box-sizing: border-box; font-family: "Source Code Pro", monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal;"><span class="hljs-tag" style="color: rgb(0, 0, 0); box-sizing: border-box;">QPushButton</span><span class="hljs-id" style="box-sizing: border-box; color: rgb(155, 112, 63);">#okButton</span> <span class="hljs-rules" style="box-sizing: border-box;">{ <span class="hljs-rule" style="box-sizing: border-box;"><span class="hljs-attribute" style="box-sizing: border-box;">color</span>:<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 102, 102);"> gray </span></span></span>} <span class="hljs-tag" style="color: rgb(0, 0, 0); box-sizing: border-box;">QPushButton</span> <span class="hljs-rules" style="box-sizing: border-box;">{ <span class="hljs-rule" style="box-sizing: border-box;"><span class="hljs-attribute" style="box-sizing: border-box;">color</span>:<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 102, 102);"> red </span></span></span>}</code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; background-color: rgb(238, 238, 238); top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right: 1px solid rgb(221, 221, 221); list-style: none; text-align: right;"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li></ul>
两个规则匹配objectName为okButton的QPushButton实例,color属性有冲突。要解决这个冲突,必须考虑到的选择器的特殊性。上面的例子,QPushButton#okButton被认为比QPushButton更具体,因为它通常是指单个对象,而不是一类的所有实例。
同样的,利用伪状态比不指定伪状态那些选择器更具体。因此,下面的样式指定一个QPushButton应该有鼠标悬停文本白色,否则文本红色效果:
<code class="language-Qt hljs css has-numbering" style="display: block; padding: 0px; background: transparent; color: inherit; box-sizing: border-box; font-family: "Source Code Pro", monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal;"><span class="hljs-tag" style="color: rgb(0, 0, 0); box-sizing: border-box;">QPushButton</span><span class="hljs-pseudo" style="color: rgb(0, 0, 0); box-sizing: border-box;">:hover</span> <span class="hljs-rules" style="box-sizing: border-box;">{ <span class="hljs-rule" style="box-sizing: border-box;"><span class="hljs-attribute" style="box-sizing: border-box;">color</span>:<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 102, 102);"> white </span></span></span>} <span class="hljs-tag" style="color: rgb(0, 0, 0); box-sizing: border-box;">QPushButton</span> <span class="hljs-rules" style="box-sizing: border-box;">{ <span class="hljs-rule" style="box-sizing: border-box;"><span class="hljs-attribute" style="box-sizing: border-box;">color</span>:<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 102, 102);"> red </span></span></span>}</code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; background-color: rgb(238, 238, 238); top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right: 1px solid rgb(221, 221, 221); list-style: none; text-align: right;"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li></ul>
这里有一个复杂的:
<code class="language-Qt hljs css has-numbering" style="display: block; padding: 0px; background: transparent; color: inherit; box-sizing: border-box; font-family: "Source Code Pro", monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal;"><span class="hljs-tag" style="color: rgb(0, 0, 0); box-sizing: border-box;">QPushButton</span><span class="hljs-pseudo" style="color: rgb(0, 0, 0); box-sizing: border-box;">:hover</span> <span class="hljs-rules" style="box-sizing: border-box;">{ <span class="hljs-rule" style="box-sizing: border-box;"><span class="hljs-attribute" style="box-sizing: border-box;">color</span>:<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 102, 102);"> white </span></span></span>} <span class="hljs-tag" style="color: rgb(0, 0, 0); box-sizing: border-box;">QPushButton</span><span class="hljs-pseudo" style="color: rgb(0, 0, 0); box-sizing: border-box;">:enabled</span> <span class="hljs-rules" style="box-sizing: border-box;">{ <span class="hljs-rule" style="box-sizing: border-box;"><span class="hljs-attribute" style="box-sizing: border-box;">color</span>:<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 102, 102);"> red </span></span></span>}</code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; background-color: rgb(238, 238, 238); top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right: 1px solid rgb(221, 221, 221); list-style: none; text-align: right;"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li></ul>
这里,两个选择器有相同的特殊性,如果鼠标在按钮上时,第二条规则优先。如果在这种情况下我们想要白色文本,需要重新排序规则:
<code class="language-Qt hljs css has-numbering" style="display: block; padding: 0px; background: transparent; color: inherit; box-sizing: border-box; font-family: "Source Code Pro", monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal;"><span class="hljs-tag" style="color: rgb(0, 0, 0); box-sizing: border-box;">QPushButton</span><span class="hljs-pseudo" style="color: rgb(0, 0, 0); box-sizing: border-box;">:enabled</span> <span class="hljs-rules" style="box-sizing: border-box;">{ <span class="hljs-rule" style="box-sizing: border-box;"><span class="hljs-attribute" style="box-sizing: border-box;">color</span>:<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 102, 102);"> red </span></span></span>} <span class="hljs-tag" style="color: rgb(0, 0, 0); box-sizing: border-box;">QPushButton</span><span class="hljs-pseudo" style="color: rgb(0, 0, 0); box-sizing: border-box;">:hover</span> <span class="hljs-rules" style="box-sizing: border-box;">{ <span class="hljs-rule" style="box-sizing: border-box;"><span class="hljs-attribute" style="box-sizing: border-box;">color</span>:<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 102, 102);"> white </span></span></span>}</code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; background-color: rgb(238, 238, 238); top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right: 1px solid rgb(221, 221, 221); list-style: none; text-align: right;"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li></ul>
或者,可以使第一条规则更加具体:
<code class="language-Qt hljs css has-numbering" style="display: block; padding: 0px; background: transparent; color: inherit; box-sizing: border-box; font-family: "Source Code Pro", monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal;"><span class="hljs-tag" style="color: rgb(0, 0, 0); box-sizing: border-box;">QPushButton</span><span class="hljs-pseudo" style="color: rgb(0, 0, 0); box-sizing: border-box;">:hover</span><span class="hljs-pseudo" style="color: rgb(0, 0, 0); box-sizing: border-box;">:enabled</span> <span class="hljs-rules" style="box-sizing: border-box;">{ <span class="hljs-rule" style="box-sizing: border-box;"><span class="hljs-attribute" style="box-sizing: border-box;">color</span>:<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 102, 102);"> white </span></span></span>} <span class="hljs-tag" style="color: rgb(0, 0, 0); box-sizing: border-box;">QPushButton</span><span class="hljs-pseudo" style="color: rgb(0, 0, 0); box-sizing: border-box;">:enabled</span> <span class="hljs-rules" style="box-sizing: border-box;">{ <span class="hljs-rule" style="box-sizing: border-box;"><span class="hljs-attribute" style="box-sizing: border-box;">color</span>:<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 102, 102);"> red </span></span></span>}</code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; background-color: rgb(238, 238, 238); top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right: 1px solid rgb(221, 221, 221); list-style: none; text-align: right;"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li></ul>
类似的问题出现在类型选择器一起使用。请看下面的例子:
<code class="language-Qt hljs css has-numbering" style="display: block; padding: 0px; background: transparent; color: inherit; box-sizing: border-box; font-family: "Source Code Pro", monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal;"><span class="hljs-tag" style="color: rgb(0, 0, 0); box-sizing: border-box;">QPushButton</span> <span class="hljs-rules" style="box-sizing: border-box;">{ <span class="hljs-rule" style="box-sizing: border-box;"><span class="hljs-attribute" style="box-sizing: border-box;">color</span>:<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 102, 102);"> red </span></span></span>} <span class="hljs-tag" style="color: rgb(0, 0, 0); box-sizing: border-box;">QAbstractButton</span> <span class="hljs-rules" style="box-sizing: border-box;">{ <span class="hljs-rule" style="box-sizing: border-box;"><span class="hljs-attribute" style="box-sizing: border-box;">color</span>:<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 102, 102);"> gray </span></span></span>}</code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; background-color: rgb(238, 238, 238); top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right: 1px solid rgb(221, 221, 221); list-style: none; text-align: right;"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li></ul>
两个规则应用于QPushButton实例(因为QPushButton继承自QAbstractButton)并有color属性的冲突。因为QPushButton继承QAbstractButton,所以QPushButton比QAbstractButton更具体。
然而,对于QSS的计算,所有的类型选择具有相同的特殊性,最后出现的规则优先。换句话说,所有的QAbstractButton颜色设置为灰色(包括QPushButton)。如果需要设置QPushButtons为红色文字,我们总能重新排序规则。
为了确定一个规则的特殊性,QSS遵循CSS2规范:
一个选择器的特殊性的计算方法如下:
- 计算选择器中ID属性的数量(= a)
- 计算选择器中伪状态类和其它属性的数量(= b)
- 计算选择器中元素名的数量(= c)
- 忽略伪元素(即子控件)。
串联的三个数字a-b-c(在具有大基数的数字系统)给出的特殊性。
一些例子:
<code class="language-Qt hljs css has-numbering" style="display: block; padding: 0px; background: transparent; color: inherit; box-sizing: border-box; font-family: "Source Code Pro", monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal;">* <span class="hljs-rules" style="box-sizing: border-box;">{<span class="hljs-rule" style="box-sizing: border-box;">}</span></span> <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">/* a=0 b=0 c=0 -> specificity = 0 */</span> <span class="hljs-tag" style="color: rgb(0, 0, 0); box-sizing: border-box;">LI</span> <span class="hljs-rules" style="box-sizing: border-box;">{<span class="hljs-rule" style="box-sizing: border-box;">}</span></span> <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">/* a=0 b=0 c=1 -> specificity = 1 */</span> <span class="hljs-tag" style="color: rgb(0, 0, 0); box-sizing: border-box;">UL</span> <span class="hljs-tag" style="color: rgb(0, 0, 0); box-sizing: border-box;">LI</span> <span class="hljs-rules" style="box-sizing: border-box;">{<span class="hljs-rule" style="box-sizing: border-box;">}</span></span> <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">/* a=0 b=0 c=2 -> specificity = 2 */</span> <span class="hljs-tag" style="color: rgb(0, 0, 0); box-sizing: border-box;">UL</span> <span class="hljs-tag" style="color: rgb(0, 0, 0); box-sizing: border-box;">OL</span>+<span class="hljs-tag" style="color: rgb(0, 0, 0); box-sizing: border-box;">LI</span> <span class="hljs-rules" style="box-sizing: border-box;">{<span class="hljs-rule" style="box-sizing: border-box;">}</span></span> <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">/* a=0 b=0 c=3 -> specificity = 3 */</span> <span class="hljs-tag" style="color: rgb(0, 0, 0); box-sizing: border-box;">H1</span> + *<span class="hljs-attr_selector" style="color: rgb(0, 136, 0); box-sizing: border-box;">[REL=up]</span><span class="hljs-rules" style="box-sizing: border-box;">{<span class="hljs-rule" style="box-sizing: border-box;">}</span></span> <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">/* a=0 b=1 c=1 -> specificity = 11 */</span> <span class="hljs-tag" style="color: rgb(0, 0, 0); box-sizing: border-box;">UL</span> <span class="hljs-tag" style="color: rgb(0, 0, 0); box-sizing: border-box;">OL</span> <span class="hljs-tag" style="color: rgb(0, 0, 0); box-sizing: border-box;">LI</span><span class="hljs-class" style="box-sizing: border-box; color: rgb(155, 112, 63);">.red</span> <span class="hljs-rules" style="box-sizing: border-box;">{<span class="hljs-rule" style="box-sizing: border-box;">}</span></span> <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">/* a=0 b=1 c=3 -> specificity = 13 */</span> <span class="hljs-tag" style="color: rgb(0, 0, 0); box-sizing: border-box;">LI</span><span class="hljs-class" style="box-sizing: border-box; color: rgb(155, 112, 63);">.red</span><span class="hljs-class" style="box-sizing: border-box; color: rgb(155, 112, 63);">.level</span> <span class="hljs-rules" style="box-sizing: border-box;">{<span class="hljs-rule" style="box-sizing: border-box;">}</span></span> <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">/* a=0 b=2 c=1 -> specificity = 21 */</span> <span class="hljs-id" style="box-sizing: border-box; color: rgb(155, 112, 63);">#x34y</span> <span class="hljs-rules" style="box-sizing: border-box;">{<span class="hljs-rule" style="box-sizing: border-box;">}</span></span> <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">/* a=1 b=0 c=0 -> specificity = 100 */</span></code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; background-color: rgb(238, 238, 238); top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right: 1px solid rgb(221, 221, 221); list-style: none; text-align: right;"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li><li style="box-sizing: border-box; padding: 0px 5px;">7</li><li style="box-sizing: border-box; padding: 0px 5px;">8</li></ul>
级联效应
QSS可以在QApplication、父部件、子部件中设置。任意部件的有效样式表通过合并部件的祖先(父亲,祖父等)以及任何QApplication上设置的样式表。
冲突发生时,不论冲突规则的特殊性,部件自身的样式表总优先于任何继承样式表。同样,父窗口部件样式表优先于祖父等。
这样,一个部件设置样式自动使得它比在祖先部件或QApplication的样式表中指定的其它规则的优先级高。考虑下面的例子。首先,我们在QApplication中设置样式表:
<code class="language-Qt hljs css has-numbering" style="display: block; padding: 0px; background: transparent; color: inherit; box-sizing: border-box; font-family: "Source Code Pro", monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal;"><span class="hljs-tag" style="color: rgb(0, 0, 0); box-sizing: border-box;">qApp-</span>><span class="hljs-tag" style="color: rgb(0, 0, 0); box-sizing: border-box;">setStyleSheet</span>("<span class="hljs-tag" style="color: rgb(0, 0, 0); box-sizing: border-box;">QPushButton</span> <span class="hljs-rules" style="box-sizing: border-box;">{ <span class="hljs-rule" style="box-sizing: border-box;"><span class="hljs-attribute" style="box-sizing: border-box;">color</span>:<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 102, 102);"> white </span></span></span>}");</code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; background-color: rgb(238, 238, 238); top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right: 1px solid rgb(221, 221, 221); list-style: none; text-align: right;"><li style="box-sizing: border-box; padding: 0px 5px;">1</li></ul>
然后,我们设置QPushButton的样式表:
<code class="language-Qt hljs css has-numbering" style="display: block; padding: 0px; background: transparent; color: inherit; box-sizing: border-box; font-family: "Source Code Pro", monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal;"><span class="hljs-tag" style="color: rgb(0, 0, 0); box-sizing: border-box;">myPushButton-</span>><span class="hljs-tag" style="color: rgb(0, 0, 0); box-sizing: border-box;">setStyleSheet</span>("* <span class="hljs-rules" style="box-sizing: border-box;">{ <span class="hljs-rule" style="box-sizing: border-box;"><span class="hljs-attribute" style="box-sizing: border-box;">color</span>:<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 102, 102);"> blue </span></span></span>}");</code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; background-color: rgb(238, 238, 238); top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right: 1px solid rgb(221, 221, 221); list-style: none; text-align: right;"><li style="box-sizing: border-box; padding: 0px 5px;">1</li></ul>
QPushButton样式表强制QPushButton(以及任何子部件)显示蓝色文字,尽管应用程序范围内的样式表提供的规则更具体。
如果按照下面这种方式写,其结果是相同的:
<code class="language-Qt hljs bash has-numbering" style="display: block; padding: 0px; background: transparent; color: inherit; box-sizing: border-box; font-family: "Source Code Pro", monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal;">myPushButton-><span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">set</span>StyleSheet(<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"color: blue"</span>);</code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; background-color: rgb(238, 238, 238); top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right: 1px solid rgb(221, 221, 221); list-style: none; text-align: right;"><li style="box-sizing: border-box; padding: 0px 5px;">1</li></ul>
但如果QPushButton有孩子(不太可能),样式表就不会对它们有效果。
样式表级联是一个复杂的话题。请参考CSS2 Specification,要知道目前Qt没有实现。
继承性
在经典的CSS中,当字体和颜色没有明确设置时,它就会自动从父继承。当使用QSS时,部件不会自动从父继承字体和颜色。
例如,一个QGroupBox中包含QPushButton:
<code class="language-Qt hljs css has-numbering" style="display: block; padding: 0px; background: transparent; color: inherit; box-sizing: border-box; font-family: "Source Code Pro", monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal;"><span class="hljs-tag" style="color: rgb(0, 0, 0); box-sizing: border-box;">qApp-</span>><span class="hljs-tag" style="color: rgb(0, 0, 0); box-sizing: border-box;">setStyleSheet</span>("<span class="hljs-tag" style="color: rgb(0, 0, 0); box-sizing: border-box;">QGroupBox</span> <span class="hljs-rules" style="box-sizing: border-box;">{ <span class="hljs-rule" style="box-sizing: border-box;"><span class="hljs-attribute" style="box-sizing: border-box;">color</span>:<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 102, 102);"> red</span></span>; <span class="hljs-rule" style="box-sizing: border-box;">}</span></span> ");</code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; background-color: rgb(238, 238, 238); top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right: 1px solid rgb(221, 221, 221); list-style: none; text-align: right;"><li style="box-sizing: border-box; padding: 0px 5px;">1</li></ul>
QPushButton没有一个明确的颜色设置,因此,不是继承其父QGroupBox的颜色,而是显示系统的颜色。如果要建立一个QGroupBox及其孩子的颜色,可以这样写:
<code class="language-Qt hljs css has-numbering" style="display: block; padding: 0px; background: transparent; color: inherit; box-sizing: border-box; font-family: "Source Code Pro", monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal;"><span class="hljs-tag" style="color: rgb(0, 0, 0); box-sizing: border-box;">qApp-</span>><span class="hljs-tag" style="color: rgb(0, 0, 0); box-sizing: border-box;">setStyleSheet</span>("<span class="hljs-tag" style="color: rgb(0, 0, 0); box-sizing: border-box;">QGroupBox</span>, <span class="hljs-tag" style="color: rgb(0, 0, 0); box-sizing: border-box;">QGroupBox</span> * <span class="hljs-rules" style="box-sizing: border-box;">{ <span class="hljs-rule" style="box-sizing: border-box;"><span class="hljs-attribute" style="box-sizing: border-box;">color</span>:<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 102, 102);"> red</span></span>; <span class="hljs-rule" style="box-sizing: border-box;">}</span></span>");</code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; background-color: rgb(238, 238, 238); top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right: 1px solid rgb(221, 221, 221); list-style: none; text-align: right;"><li style="box-sizing: border-box; padding: 0px 5px;">1</li></ul>
相比之下,可以用QWidget::setFont() 和 QWidget::setPalette()为子部件设置字体和画板 。
Namespaces中的部件
类型选择器可用于某一特定类型的部件。例如:
<code class="language-Qt hljs r has-numbering" style="display: block; padding: 0px; background: transparent; color: inherit; box-sizing: border-box; font-family: "Source Code Pro", monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal;">class MyPushButton : public QPushButton { // <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">...</span> } // <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">...</span> qApp->setStyleSheet(<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"MyPushButton { background: yellow; }"</span>);</code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; background-color: rgb(238, 238, 238); top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right: 1px solid rgb(221, 221, 221); list-style: none; text-align: right;"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li></ul>
QSS使用部件的QObject::className()来确定何时应用类型选择器。当自定义的部件在命名空间中时,QObject::className()返回<namespace>::<classname>
。这与子控件的语法冲突。为了解决这个问题,当命名空间内的部件使用类型选择器时,必须更换”::” 为 “–”。 例如:
<code class="language-Qt hljs r has-numbering" style="display: block; padding: 0px; background: transparent; color: inherit; box-sizing: border-box; font-family: "Source Code Pro", monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal;">namespace ns { class MyPushButton : public QPushButton { // <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">...</span> } } // <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">...</span> qApp->setStyleSheet(<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"ns--MyPushButton { background: yellow; }"</span>);</code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; background-color: rgb(238, 238, 238); top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right: 1px solid rgb(221, 221, 221); list-style: none; text-align: right;"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li><li style="box-sizing: border-box; padding: 0px 5px;">7</li><li style="box-sizing: border-box; padding: 0px 5px;">8</li></ul>
设置对象属性
从4.3及以后,任何可被识别的Q_PROPERTY都可以使用qproperty-<property name>
语法设置。
例如:
<code class="language-Qt hljs css has-numbering" style="display: block; padding: 0px; background: transparent; color: inherit; box-sizing: border-box; font-family: "Source Code Pro", monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal;"><span class="hljs-tag" style="color: rgb(0, 0, 0); box-sizing: border-box;">MyLabel</span> <span class="hljs-rules" style="box-sizing: border-box;">{ <span class="hljs-rule" style="box-sizing: border-box;"><span class="hljs-attribute" style="box-sizing: border-box;">qproperty-pixmap</span>:<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 102, 102);"> <span class="hljs-function" style="box-sizing: border-box;">url(pixmap.png)</span></span></span>; <span class="hljs-rule" style="box-sizing: border-box;">}</span></span> <span class="hljs-tag" style="color: rgb(0, 0, 0); box-sizing: border-box;">MyGroupBox</span> <span class="hljs-rules" style="box-sizing: border-box;">{ <span class="hljs-rule" style="box-sizing: border-box;"><span class="hljs-attribute" style="box-sizing: border-box;">qproperty-titleColor</span>:<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 102, 102);"> <span class="hljs-function" style="box-sizing: border-box;">rgb(<span class="hljs-number" style="box-sizing: border-box;">100</span>, <span class="hljs-number" style="box-sizing: border-box;">200</span>, <span class="hljs-number" style="box-sizing: border-box;">100</span>)</span></span></span>; <span class="hljs-rule" style="box-sizing: border-box;">}</span></span> <span class="hljs-tag" style="color: rgb(0, 0, 0); box-sizing: border-box;">QPushButton</span> <span class="hljs-rules" style="box-sizing: border-box;">{ <span class="hljs-rule" style="box-sizing: border-box;"><span class="hljs-attribute" style="box-sizing: border-box;">qproperty-iconSize</span>:<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 102, 102);"> <span class="hljs-number" style="box-sizing: border-box;">20</span>px <span class="hljs-number" style="box-sizing: border-box;">20</span>px</span></span>; <span class="hljs-rule" style="box-sizing: border-box;">}</span></span></code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; background-color: rgb(238, 238, 238); top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right: 1px solid rgb(221, 221, 221); list-style: none; text-align: right;"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li></ul>
如果属性引用Q_ENUMS声明的枚举,则应该参考其常量的名字,而不是数值。
更多参考
Qt中QSS帮助文档 - 打开Qt Assistant,查找关键字:
- Qt Style Sheets Reference - QSS参考
- Qt Style Sheets Examples - QSS实例
- The Style Sheet Syntax - QSS语法
- Qt之加载QSS文件
- Qt之QSS(语法高亮)
- Qt之QSS(动态属性)
- Qt之QSS(Q_PROPERTY-原始属性)
- Qt之QSS(Q_PROPERTY-自定义属性)
- Qt之QSS(QDarkStyleSheet)
- Qt之QSS(黑色炫酷)
- Qt之QSS(白色靓丽)