QSS语法及常用样式

一、简述

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

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

/*按钮普通态*/
QPushButton
{
    /*字体为微软雅黑*/
    font-family:Microsoft Yahei;
    /*字体大小为20点*/
    font-size:20pt;
    /*字体颜色为白色*/    
    color:white;
    /*背景颜色*/  
    background-color:rgb(14 , 150 , 254);
    /*边框圆角半径为8像素*/ 
    border-radius:8px;
}

/*按钮停留态*/
QPushButton:hover
{
    /*背景颜色*/  
    background-color:rgb(44 , 137 , 255);
}

/*按钮按下态*/
QPushButton:pressed
{
    /*背景颜色*/  
    background-color:rgb(14 , 135 , 228);
    /*左内边距为3像素，让按下时字向右移动3像素*/  
    padding-left:3px;
    /*上内边距为3像素，让按下时字向下移动3像素*/  
    padding-top:3px;
}

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

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

二、样式表语法

2.1 样式规则

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

QPushButton { color: red }

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

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

QPushButton, QLineEdit, QComboBox { color: red }

相当于三个规则序列：

QPushButton { color: red }
QLineEdit { color: red }
QComboBox { color: red }

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

QPushButton { color: red; background-color: white }

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

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

2.2 选择器类型

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

选择器	示例	说明
通用选择器	*	匹配所有部件
类型选择器	QPushButton	匹配QPushButton及其子类的实例
属性选择器	QPushButton[flat=”false”]	匹配QPushButton中flat属性为false的实例。
类选择器	.QPushButton	匹配QPushButton的实例，但不包含子类。相当于*