【Qt专栏】Qt样式表入门一：介绍语法和选择器

原创已于 2023-02-17 00:06:03 修改 · 1.5k 阅读

21 ·

CC 4.0 BY-SA版权

文章标签：

#qt #开发语言

于 2022-10-12 00:08:38 首次发布

Qt 专栏收录该内容

16 篇文章

订阅专栏

一，简介

二，语法

三，选择器

文章系列：Qt样式表入门二：介绍特性和盒模型https://blog.csdn.net/weixin_43729127/article/details/127334999 文章系列：Qt样式表入门三：介绍属性https://blog.csdn.net/weixin_43729127/article/details/127338968 文章系列：Qt样式表入门四：介绍Brushhttps://blog.csdn.net/weixin_43729127/article/details/127341801

一，简介

1.Qt样式表（style sheet）简称QSS，它是用于制定用户界面的强有力机制，其概念，术语，语法规则是受到HTML中的级联样式表（Cascading Style Sheets，CSS）启发而来的，只是QSS是是应用于窗体界面的。

2.个人认为使用 QSS 有以下好处:

可读性高并且非常直观,便于设置界面样式。
在每个平台上都有相同的显示效果。
可以在界面代码中省去与显示效果相关的大量代码,将界面逻辑独立出来，样式表集中于一个文件中编写。
在界面风格(配色, 字体等)改变的情况下, 可以不用修改项目源码就可以实现。

二，语法

样式表由一系列的样式规则组成。一条样式规则由一个选择器和一个声明语句组成，选

择器指明了哪个（或者说是哪种）控件将会受规则影响，而声明语句则指明了哪些属性会设

置到这个（这些）控件，语法如下：

selector 代表选择器, 指明了哪个(或者说是哪种)控件将会受到规则影响。
{attribute: value;} 代表声明语句, 其中 attribute 表示属性, value 表示属性的值, 属性与它的值之间必须以冒号（:）隔开, 属性值后面必须以分号（;）结束, 表示这条属性已经设置完成。
整条语句加起来的意思是, 在整个应用程序中, 被 selector 匹配的控件, 它们控件的 attribute 属性的值应该被设置为 value。

举个栗子：QPushButton{ background-color: red;} 表示将我们的应用程序中所有的 QPushbutton 对象以及它的子类对象应该使用 red 作为它们的背景色;

三，选择器

1.通用选择器（又称通配符选择器）

格式如下：通用选择器用（*）来表示, 它表示匹配程序中所有的 Widget。
注意点：由于通用选择器会匹配程序中所有的 Widget, 效率较低, 因此应该尽量减少或者不使用。
一般用法：通用选择器一般用来给应用程序设置统一的字体。

举个栗子：*{ font: normal 20px “宋体”; } 这条语句表示将程序中所有控件的字体大小都设置为 20px 大小, 字体采用宋体。

2.类型选择器（偶尔使用）

格式如下：类名即 Widget 类名, 由 QObject :: metaObject() :: className()获取, 类型选择器匹配所有该类以及该类的派生类的对象。
注意点：当为命名空间中 widget 使用类型选择器时 , 我们必须将” :: ” 替换成 ” -- ”。
一般用法：类型选择器会匹配所有该类以及该类的派生类的对象, 所以我们在程序中, 有时为了统一一些具有相似性的控件的样式, 可以使用类型选择器。

举个栗子：QPushButton{ color: blue; } 这条语句表示将程序中所有的 QPushButton 类和它的派生类的对象, 它们的前景色(即文字颜色)被设置为蓝色

3.类选择器（只影响自身，不影响其子类样式）

格式如下：类选择器的类名前面有一个（.）, 这种选择器只会匹配该类的所有对象, 而不会匹配其派生类的对象。
一般用法：类选择器提供了一种匹配所有该类的对象但不会匹配派生类的方法, 通常用来特例化拥有派生类的类对象。

举个栗子：.QFrame{ padding: 15px 25px; }这条语句表示将程序中所有的 QFrame 设置相同的样式，但又不想影响它的子类对象(QLabel, QTableWidget等等)

4.ID选择器（经常使用）

格式如下：id 指的是控件类的 objectName，“#” + objectName 表示匹配所有 objectName 为 ID选择器所指定名称的Widget，为其设置样式。
注意点：
1. objectName 是大小写敏感的，并尽可能保持唯一性， objectName 中不能含有空格。
2. “#” 与 ID 之间不能有空格，并保证 objectName 不要在运行时被改变，否则加载样式表文件时会匹配不到原先的控件。
一般用法：ID 选择器一般用于为比较特殊的控件设置样式，例如在项目界面中需要突出一个重要的按钮, 那么此时我可以给这个按钮设置一个独特的样式用以提醒用户。

举个栗子：QPushButton#settings_button{ color: red; background: qlineargradient(spread:pad, x1:0, y1:0, x2:0, y2:1, stop:0 #454648, stop:1 #7A7A7A);}

5.后代选择器（经常使用）

格式如下：即在选择器1 匹配的所有对象中, 找到选择器2 所匹配的所有后代对象, 并给它们设置样式。
注意点：
1. 后代选择器必须用空格隔开每个选择器，并可以通过空格一直延续下去。
2. 后代选择器可以使用其它类型的选择器。
一般用法：后代选择器一般用于指定特定控件类的后代的样式。

举个栗子： QWidget QFrame QPushButton{ font-size: 20px; padding: 0px; } 这表示将应用程序中QWidget下QFrame控件里的QPushButton设置指定样式。

6.子元素选择器（极少使用）

格式如下：表示找到选择器1 匹配到的对象中的选择器2 控件里的直接子元素然后设置样式。
注意点：
1. 子元素选择器必须用“>”连接，不建议在“>”两边出现空格。
2. 子元素选择器只会查找“儿子”, 不会查找其“孙子”等后代。
3. 子元素选择器不能通过“>”一直延续下去, 只能有一个“>”。
4. 子元素选择器可以使用其它类型的选择器。
5. 在使用子元素选择器时 , 推荐使用类选择器替代类型选择器。
一般用法：子元素选择器一般用于一些特定布局条件中的控件。

举个栗子：.QGroupBox > .QCheckBox{ color: blue; }这表示直接给布局在 QGroupBox 下的 QCheckBox 控件设置一些特定样式，但不会给其子类设置样式。

7.属性选择器（未曾使用）

格式如下：1.attribute=value 表示匹配有特定属性 attribute, 并且值为 value 的所有控件, 然后设置样式。2.attribute|=value 表示匹配有特定属性 attribute, 并且值以 value 开头的所有控件, 然后设置样式。3.attribute~=value 表示匹配有特定属性 attribute, 并且值包含 value 的所有控件, 然后设置样式。

一般用法：属性选择器一般不常用，我也没用过，如果要用，请参照官方文档的方法使用。

8.并集选择器（经常使用）

格式如下：表示将每个单独选择器匹配到的控件放在同一个结果集中, 并给结果集中的每个控件都设置声明语句中的样式。
注意点：
1. 并集选择器必须使用 “ , ” 来连接不同的选择器。
2. 并集选择器可以使用其它类型的选择器。
一般用法：主要用于给具有相同属性并且外观相似的的控件设置样式。

举个栗子：.QSpinBox, .QComboBox{ border: 1px solid gray; background-color:white; } 这表示直接给QSpinBox和QComboBox设置一致的样式。

9.子控件选择器（偶尔使用）

格式如下：表示对类型选择器或类选择器指定的所有控件的子控件设置样式。
一般用法：较为复杂，可参考官方文档说明，后续我会添加内容。

10.伪类选择器（经常使用）

格式如下：表示对类型选择器或类选择器指定的所有控件设置它在指定状态时的样式。
注意点：
1. 伪状态以冒号（ : ）作为分隔紧跟着选择器。
2. 伪状态可以使用感叹号（ ! ）进行取反。
3. 伪状态可以链接起来使用（逻辑与的效果）。
4. 伪状态可以与子控件组合使用。
一般用法：主要设置控件的在不同操作的样式显示，如QPushButton的鼠标悬浮，点击，放开时的样式设置，又称三态。