1. 样式表规则
样式表包含了一系列的样式规则,每个样式规则由选择器(selector)和声明(declaration)组成。
选择器:指定了受该规则影响的部件。
声明:指定了这个部件上要设置的属性。
2. 选择器类型
选择器 | 示例 | 说明 |
---|---|---|
通用选择器 | * | 匹配所有部件 |
类型选择器 | QPushButton | 匹配所有的 QPushButton,包含继承QPushButton实现的子类 |
类选择器 | .QPushButton | 匹配所有的 QPushButton ,不包含继承QPushButton实现的子类 |
属性选择器 | QPushButton[checked=true] | 匹配所有 QPushButton 中设置了 checked=true 的部件 |
ID选择器 | QPushButton#myBtn | 匹配所有 QPushButton 中对象名为 myBtn 的部件 |
后代选择器 | QDialog QPushButton | 匹配QDialog 中的所有 QPushButton,包括子孙部件 |
子代选择器 | QDialog > QPushButton | 匹配QDialog 中的直接子部件 QPushButton,不包括子孙部件 |
并集选择器 | QPushButton QLineEdit | 同时匹配所有的 QPushButton 和 QLineEdit 部件 |
3. 子控件
对复杂部件的子控件进行样式设置,例如 QComboBox 的下拉框, QTreeView 的 branch,QSpinBox 的向上向下箭头等进行单独样式设置。
4. 伪状态
伪状态是指像 QPushButton 的鼠标悬浮,鼠标按压等状态。选择器可以包含伪状态来限制规则在部件的指定状态上应用。伪状态出现在选择器之后,用冒号隔开。
5.具体示例
5.1 通用选择器
功能:设置整个系统部件的字体为 14px
*{font-size: 14px;}
5.2 类型选择器
功能:设置所有 QPushButton 的样式,字体颜色为红色,边框为绿色。所有 QPushButton 及其子类都会应用此样式。
QPushButton{color: red;border: 1px solid green;}
效果:
说明: 其中 自定义btn 是通过继承 QPushButton实现的子类。
5.3 类选择器
功能:设置所有 QPushButton 的样式,字体颜色为红色,边框为绿色。只有 QPushButton类型部件会应用此样式,继承自 QPushButton 实现的子类按钮不会应用此样式。
示例:
.QPushButton{color: red;border: 1px solid green;}
效果:
说明:
1)类选择器比类型选择器多了一个点(.)。
2)其中 自定义btn 是通过继承QPushButton实现的子类。可以看到该按钮并没有应用设置的样式。
5.5 属性选择器
示例:
QPushButton[checked=true]{ /*属性 checked 为 true 的 QPushButton 应用此样式*/color: red;border: 1px solid green;
}QPushButton[flat=true]{/*属性 flat 为 true 的 QPushButton 应用此样式*/color: green;border: 1px solid blue;
}QPushButton[whatsThis="appBtn"]{/*属性 whatsThis 为 appBtn 的QPushButton应用此样式*/color: green;border: 1px solid red;
}QPushButton[mprop="testpro"]{/*自定义属性 mprop 为 testpro 的QPushButton应用此样式*/color: pink;border: 1px solid yellow;
}
效果:
说明: 1)第一个按钮在 ui 设计器的属性编辑器中勾选了 checkable 和 checked
2) 第一个按钮在 ui 设计器的属性编辑器中勾选了 flat
3)第三个按钮是通过调用函数 setWhatsThis() 设置了 whatsThis 属性。
对于通过UI设计器添加的部件,也可以直接在【属性编辑器】中设置【whatsThis】 的值 > 4)可以使用 setProperty() 为部件设置属性,然后在样式表中使用该属性。如示例中的 btn3 ,使用代码 ui->btn3->setProperty(“mprop”, “testpro”); 进行属性设置,之后在属性选择器中就可以使用该属性了。
5.5 ID 选择器
格式:
1) 类型名#ID: 指定了类型,则只有对应的类型的 objectName 为 appBtn 会应用样式。
2) #ID:此时未指定类型时,则只要部件的 objectName 为 appBtn都会应用设置的样式。
示例一:将 QLineEdit 和 QPushButton 的部件的 objectName 都设置为 appBtn ,且使用 #appBtn 进行样式设置,则两个部件都会应用相同的样式。
示例二:将 QLineEdit 和 QPushButton 的部件的 objectName 都设置为 appBtn,且使用 QPushButton#appBtn 进行样式设置,则只有 QPushButton 部件才会应用此样式。
5.6 后代选择器
场景:
新建一个 QDialog, 在其上创建一个 QPushButton 和 一个 QGroupBox,然后在 QGroupBox 中又创建了两个 QPushButton 。
示例:
QDialog QPushButton{color: red;border: 1px solid green;
}
效果:QDialog 以及 QGroupBox 中的两个按钮都设置了对应的样式。
5.7 子代选择器
示例:
QDialog > QPushButton{color: red;border: 1px solid green;}
效果:只有 QDialog 上创建的 dlgBtn1 设置了对应的样式,QGroupBox 中的两个按钮没有设置。
5.8 并集选择器
功能: 同时为不同类型的部件设置样式
示例:
QPushButton, QLineEdit{color: red;border: 1px solid green;}
效果:
QLineEdit 和 QPushButton 同时应用了设置的样式。
5.9 子控件
示例:对 QComboBox 的下拉框进行样式设置
QComboBox::drop-down{border:1px solid transparent;width: 16px;padding:6px;border-radius:4px;}
效果:
5.10 伪状态
选择器可以包含伪状态来限制规则在部件的指定状态上应用。伪状态出现在选择器之后,用冒号隔开。
伪状态是指像 QPushButton 的鼠标悬浮,鼠标按压等状态。
QPushButton:hover{/*鼠标悬浮在按钮上是,边框变为蓝色*/border: 1px solid blue;}
1)伪状态可以用感叹号来表示否定。
QPushButton:!hover{/*设置非悬浮状态样式*/color: red;border: 1px solid green;}
2)伪状态可以多个连用,用来表示逻辑与的操作。
QPushButton:hover:checked{/*鼠标悬浮时且设置为checked的按钮应用此样式*/color: yellow;border: 1px solid blue;}
3)可以用逗号隔开,同时设置多个伪状态,用来表示逻辑或的操作。
QPushButton:hover, QPushButton:checked{/*鼠标悬浮时或设置为checked的按钮应用此样式*/color: yellow;border: 1px solid blue;}
4)伪状态可以和子控件联合使用。
QComboBox::drop-down:hover{/*鼠标放到 QComboBox 的下拉框时,下拉框颜色变为红色*/border:1px solid red;}
6. 冲突解决
当几个样式规则对相同的属性指定了不同的值时,就产生了冲突。
解决冲突的原则是:
1) 特殊选择器优先。
QPushButton[whatsThis="appBtn"]{color: red;border: 1px solid green;}QPushButton{color: yello;border: 1px solid blue;}
效果:
说明: 设置了 whatsThis=“appBtn” 的按钮设置为红色字体,绿色边框,其他按钮设置为 黄色字体,蓝色边框。
2)有伪状态的比没有伪状态的优先。
3)如果两个选择器器的特殊性相同,则后面出现的比前面的优先。如下:会使用后面设置的蓝色边框,黄色字体的样式。
QPushButton{ /*红色字体,绿色边框*/color: red;border: 1px solid green;}QPushButton{/*黄色字体,蓝色边框*/color: yello;border: 1px solid blue;}
4)样式表可以设置 QApplication、父部件或子部件上。部件有效的样式表是通过部件祖先的样式表和QApplication的样式表合并得到的。当发生冲突时,部件自己的样式表优先于任何继承的样式表,父部件的样式表优先于祖先的样式表。
7. 其他说明
使用 Qt 样式表时,部件并不会自动从父部件继承字体和颜色设置。