USS 选择器

本主题使用以下视觉树示例来演示选择器：

简单选择器

简单的选择器可以是通配符，也可以是类型、名称或类名的任意组合。基于上面的视觉树示例，以下列举了一些有效的简单选择器：

• #container1
• VisualElement
• VisualElement#container1
• VisualElement.yellow
• Button#OK.yellow:hover

Type

TypeName { ...}

使用 Type 选择器可根据 C# 类型来匹配元素。例如，Button 匹配两个按钮。

使用 Type 选择器时，仅指定具体的对象类型。不要在类型名称中包含命名空间。

Name

# name { ...}

使用 Name 选择器可根据 VisualElement.name 属性的值来匹配元素。 例如，#Cancel 根据名称匹配第二个按钮。

元素名称在面板内应该是唯一的。此建议并非强制要求，但使用非唯一名称可能会导致意外匹配。

在为元素分配名称时不要包含 #。

Class

.class { ...}

使用 Class 选择器可匹配分配给特定类的元素。

要匹配元素，该选择器不必指定分配给元素的所有类。指定单个类名将会匹配分配了同一个类的元素。例如，.yellow 会匹配名为 container2 的元素和名为 OK 的按钮元素。

如果在选择器中指定多个类，则对于要匹配的元素，必须为其分配相同的类名。

在为元素分配类名时不要包含 .。

类名不能以数字开头。

通配符

* { ...}

匹配任何元素。

伪状态

:pseudo-state { ...}

使用伪状态可匹配进入特定状态时的元素。例如，Button:hover 匹配 Button 类型的视觉元素，但仅当用户将光标放在视觉元素上时才符合条件。

支持的伪状态：

• hover：光标悬停在视觉元素上。
• active：正在与视觉元素交互。
• inactive：不再与视觉元素交互。
• focus：视觉元素具有焦点。
• selected：未使用。
• disabled：视觉元素设置为 enabled == false。
• enabled：视觉元素设置为 enable == true。
• checked：视觉元素是一个 Toggle 元素并已选中。

在其他简单选择器之后指定伪状态。伪状态不能扩展。只支持一组预定义的伪状态。

复杂选择器

复杂选择器是用分隔符将简单选择器组合起来的选择器。复杂选择器还包括选择器列表，这些列表提供了将相同样式应用于多个元素的缩写方式。

分隔符

UIElements 支持以下分隔符：

• 空（或空格）分隔符将匹配元素的所有后代。 -“大于”符号 (>) 匹配的视觉元素是先前选择器匹配的元素的直接后代。

例如：

• #container1 .yellow：匹配内部元素和第一个按钮
• #container2 > .yellow：仅匹配内部元素

选择器列表

使用选择器列表可将相同的样式定义应用于多个元素。每个选择器用逗号分隔，且每个选择器可以是简单或复杂选择器。

例如：

# container1, Button { padding-top:10 }

等同于

# container1 { padding-top: 10 } Button { padding-top: 10}

选择器优先级

如果多个选择器匹配相同的元素，则具有最高特异性的选择器优先。对于简单选择器，基本特异性规则为：

• Name，特异性高于
• Class，特异性高于
• Type，特异性高于
• 通配符 *

如果两个选择器相等，则文件中最后出现的选择器优先。

为了确定跨不同文件的选择器特异性，UIElement 会考虑树的遍历顺序（为了应用样式）。具有较高深度和同级索引的元素优先。

当默认样式和用户定义的样式具有相同的选择器时，用户定义的选择器被认为比默认选择器具有更高的特异性。

!important 关键字将被忽略。

C# 中设置的值具有最高的特异性。

---

• 2018–11–02 页面已修订并只进行了有限的编辑审查