QSS入门

 QSS全称为Qt Style Sheets，也就是Qt样式表，它是Qt提供的一种用来自定义控件外观的机制。详细的QSS介绍和使用可以在QT的帮助文档中查看，这里只做简单介绍，用于入门

基本语法

1. 选择器（Selector）：用于选择要应用样式的控件。

   • 全局选择器：* 选择所有控件。
   • 类型选择器：选择特定类型的控件，例如 QPushButton。
   • ID选择器：选择具有特定ID的控件，例如 #myButton（id为myButton）。
   • 类选择器：选择具有特定类的控件，例如 .myClass（类名为myClass）。
   • 属性选择器：选择器[属性=“值”]，例如QPushButton[flat="false"]; 匹配所有flat属性是false的QPushButton实例，注意该属性可以是自定义的属性，不一定非要是类本身具有的属性。
   • 后代选择器：选择器之间用空格隔开，例如QDialog QPushButton ; 所有QDialog容器中包含的QPushButton，不管是直接的还是间接的
   • 子代选择器：选择器之间用>号隔开，例如QDialog > QPushButton; 所有QDialog容器下面的QPushButton，其中要求QPushButton的直接父容器是QDialog

2. 属性（Property）：定义控件的样式属性。

   • 属性名：样式属性的名称，例如 color。
   • 属性值：样式属性的值，例如 red。

3. 伪状态（Pseudo-states）：用于选择特定状态下的控件，例如 :hover（鼠标悬停）。

示例

/* 全局选择器，应用于所有控件 */
*
{
    font-family: "Arial";
    font-size: 14px;
}

/* 类型选择器，应用于所有QPushButton控件（包括继承QPushButton的自定义控件） */
QPushButton 
{
    background-color: #3498db;
    color: white;
    border-radius: 5px;
}

/* ID选择器，应用于ID为myButton的控件 */
#myButton 
{
    background-color: #e74c3c;
}
/* 一般我们的ID选择器是和类型选中器联合使用的 */
QPushButton#myButton,#myButton1#myButton2 
{
    background-color: #e74c3c;
}
/* 类选择器，应用于类为myClass的控件 */
.myClass 
{
    border: 1px solid #ccc;
}
/* 属性选择器，应用于类为QFrame的控件, QFrame没有点击的伪状态选择器，通过在
代码中添加点击事件，在点击的时候设置 ui->frame->setProperty("click", "true");
此时QSS的设置生效，QFrame背景色变成黑色*/
QFrame[click="true"]
{
    background-color:rgb(255,255,255);
}
/* 后代选择器，应用于对象为myDlg的QDialog下的QLabel的控件 */
QDialog#myDlg QLabel
{
    background: transparent;
    border-radius: 19px;/*弧度为19px，那么该控件的长>38px且宽>38px才能生效*/
}
/* 子选择器 应用于类为QDialog容器下面的QPushButton控件 */
QDialog>QLabel
{
    background: transparent;
    border-radius: 19px;
}
/* 伪状态选择器，应用于鼠标悬停状态下的QPushButton控件 */
QPushButton:hover 
{
    background-color: #2980b9;
}

常用属性

• color: 设置文本颜色。
• background-color: 设置背景颜色。
• border: 设置边框属性。
• border-radius: 设置边框圆角。
• font-family: 设置字体族。
• font-size: 设置字体大小。
• padding: 设置内边距。
• margin: 设置外边距。

嵌套选择器

可以通过嵌套选择器来设置特定父子关系的控件样式。

QPushButton 
{
    background-color: #3498db;
    color: white;
}

QPushButton::menu-indicator 
{
    image: url(menu_indicator.png);
}

这里的URL的图片路径可以通过看资源文件找到，通过下图打开编辑器

通过普通文本打开的image.qrc,如下图所示路径的/image是prefix，不是qrc文件名

伪元素（Pseudo-elements）

伪元素用于选择特定部分的控件，例如 ::section。

QHeaderView::section 
{
    background-color: #f1c40f;
    color: black;
    padding: 4px;
    border: 1px solid #d4d4d4;
}

继承与优先级

QSS规则的优先级与CSS类似，具体规则如下：

• 就近原则：后定义的规则会覆盖先定义的规则。
• 特异性：ID选择器的优先级高于类选择器，类选择器的优先级高于类型选择器。

/* 显示红色文字 */
QPushButton { color: gray }
QPushButton { color: red }

/* 对象名为btnOk按键是灰色文字其他按键显示红色文字，是因为对象名为btnOk更有特异性 */
QPushButton#btnOk { color: gray }
QPushButton { color: red }

/* 当鼠标放在按钮上的时候文字是白色，其他情况下都是红色 */
QPushButton:hover { color: white }
QPushButton { color: red }

/* 如果两个规则的特异性是一样的，默认情况下前景文字是红色的，当鼠标经过的时候并不会变成白色，因为他们的特异性是一样的，所以选择后面的，也就是红色。如果交换一下顺序，当鼠标经过的时候，就变成白色的了，因为他们的特异性一样，所以选择后面的规则。 */
QPushButton:hover { color: white }
QPushButton:enabled { color: red } 

/* 在类的继承结构上，QAbstractButton是QPushButton的父类，显然QPushButton更加具有特异性，所以QPushButton的前景颜色被应用为红色，而不是灰色 */
QPushButton { color: red }  
QAbstractButton { color: gray }