GTK 中的 CSS [src]

本章描述了 GTK 如何使用 CSS 进行样式设置和布局。它并不是从基本原理出发对 CSS 进行解释，而是重点列出受支持的 CSS 特性，以及 Web CSS 和 GTK 之间的差异。

有很多入门文档可用于了解 CSS 的总体情况。在下表中，我们提供了指向官方规范的链接，这些规范可用于查找各个选择器和属性的定义。

CSS 节点

GTK 通过将选择器与节点树进行匹配来应用样式表中找到的样式信息。树中的每个节点都有一个名称、一个状态，并可能具有样式类。每个节点的孩子以线性方式排序。

每个小部件都具有一个或多个以上的 CSS 节点，并确定它们作为整体节点树中的子节点和同级节点的名称、状态、样式类以及它们被布局的方式。每个小部件的文档都对其包含哪些 CSS 节点进行了说明。

GtkScale 的 CSS 节点

scale[.fine-tune]
├── marks.top
│   ├── mark
┊   ┊
│   ╰── mark
├── trough
│   ├── slider
│   ├── [highlight]
│   ╰── [fill]
╰── marks.bottom
    ├── mark
    ┊
    ╰── mark

选择器

选择器的工作方式与它们在 Web 上的工作方式非常相似。

所有小部件都具有一个或多个具有元素名称和样式类的 CSS 节点。在选择器中使用样式类时，必须以句点为前缀。小部件名称可以在选择器中用作 ID。在选择器中使用小部件名称时，必须以 # 字符为前缀。

GTK CSS 选择器

模式	参考	备注
*	CSS 选择器级别 3
E	CSS 选择器级别 3
E.class	CSS 选择器级别 3
E#id	CSS 选择器级别 3
E:nth-child(n)	CSS 选择器级别 3
E:nth-last-child(n)	CSS 选择器级别 3
E:first-child	CSS 选择器级别 3
E:last-child	CSS 选择器级别 3
E:only-child	CSS 选择器级别 3
E:link, E:visited	CSS 选择器级别 3	对应于 GTK_STATE_FLAG_LINK 和 GTK_STATE_FLAGS_VISITED
E:active, E:hover, E:focus	CSS 选择器级别 3	对应于 GTK_STATE_FLAG_ACTIVE、GTK_STATE_FLAG_PRELIGHT、GTK_STATE_FLAGS_FOCUSED
E:focus-within	CSS 选择器级别 4	与 CSS 不同，设置在焦点小部件的所有祖先上
E:focus-visible	CSS 选择器级别 4	与 CSS 不同，设置在焦点小部件及其所有祖先上
E:disabled	CSS 选择器级别 3	对应于 GTK_STATE_FLAG_INSENSITIVE
E:checked	CSS 选择器级别 3	对应于 GTK_STATE_FLAG_CHECKED
E:indeterminate	CSS 选择器级别 3	对应于 GTK_STATE_FLAG_INCONSISTENT
E:backdrop, E:selected		对应于 GTK_STATE_FLAG_BACKDROP、GTK_STATE_FLAG_SELECTED
E:not(selector)	CSS 选择器级别 3
E:dir(ltr), E:dir(rtl)	CSS 选择器级别 4
E:drop(active)	CSS 选择器级别 4
E:root	CSS 选择器级别 3
E F	CSS 选择器级别 3
E > F	CSS 选择器级别 3
E ~ F	CSS 选择器级别 3
E + F	CSS 选择器级别 3