Version: 2019.4
样式和 Unity 样式表
USS 属性类型

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:视觉元素设置为 enabled == true
  • checked:视觉元素是一个 Toggle 元素并已选中。
  • root:树中的最高层级视觉元素。

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

复杂选择器

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

分隔符

UIElements 支持以下分隔符:

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

例如:

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

选择器列表

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

例如:

# container1, Button { padding-top:10 }

等同于

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

选择器优先级

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

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

如果两个选择器在同一样式表中相等,则文件中最后出现的选择器优先。

为了确定跨不同文件的选择器特异性,该算法首先使用户定义的样式表中的选择器优先于 Unity 提供的默认样式表。

解析优先级的第二种方式是考虑树的遍历顺序(为了应用样式)。样式表附加到的具有较高深度和同级索引的元素优先。

注意,!important 关键字将被忽略。

最后,在 C# 中设置的值始终具有最高的特异性,并将覆盖 USS 中的任何样式。


  • 2018–11–02 页面已修订
样式和 Unity 样式表
USS 属性类型