Version: 2020.3
USS 选择器
Complex Selectors

简单选择器

USS 支持以下简单选择器:

  • C# 类型选择器匹配特定 C# 类型的元素
  • USS 类选择器匹配具有指定 USS 类的元素
  • 名称选择器匹配具有指定 name 属性的元素。
  • 通用选择器匹配任何元素

您可以将简单的选择器组合成复杂的选择器,或附加伪类以将其定位到处于特定状态的元素。

本页面描述了每种类型的简单选择器并提供了语法和示例。它使用以下 UXML 文档来演示简单选择器如何匹配元素。

<UXML xmlns="UnityEngine.UIElements">
  <VisualElement name="container1">
    <VisualElement name="container2" class="yellow">
      <Button name="OK" class="yellow" text="OK" />
      <Button name="Cancel"class="" text="Cancel" />
    </VisualElement>
  </VisualElement>
</UXML>

在未应用任何样式的情况下,UXML 文档生成如下所示的 UI。

注意:
示例图像包括边距和蓝色细边框,以帮助识别用于演示目的的各个元素。

C# 类型选择器

C# 类型选择器根据它们的 C# 类型匹配元素。

注意:
USS 类型选择器类似于匹配 HTML 标签的 CSS 类型选择器。例如,USS 中的 Button {...} 匹配 C# Button 类型的任何元素,相当于 CSS 中的 p {...} 匹配任何 (<p>) 段落标签。

语法:

C# 类型选择器是 C# 类型名称,按原样书写。

TypeName { ...}

编写 C# 类型选择器时,仅指定具体的对象类型。不要在类型名称中包含命名空间。

例如,这个选择器是有效的:

Button { ...}

这个选择器是无效:

UnityEngine.UIElements.Button { ...}

示例:

对于上面的示例 UXML 文档,以下样式规则匹配两个 Button 元素。

Button {
  border-radius: 8px;
  width: 100px;
  }

名称选择器

名称选择器根据指定的 name 属性的值匹配元素。

  • 在 C# 中,使用 VisualElement.name 设置元素的名称。
  • 在 UXML 中,可以为元素指定一个名称属性 <VisualElement name="my-nameName">

Unity 不强制任何名称约定,但您应该使面板内的元素名称唯一。使用非唯一名称可能会导致意外匹配。

注意:
USS 名称选择器类似于匹配具有特定 id 属性的元素的 CSS ID 选择器。

语法:

名称选择器由元素的指定名称和数值符号 (#) 前缀组成。

# name { ...}
注意:
仅当您在 USS 文件中编写选择器时使用数值符号 #。为 UXML 或 C# 文件中的元素指定名称时不要使用它。包含数值符号的元素名称无效。

例如 <Button name="OK" /> 有效。<Button name="#OK" /> 无效。

示例:

对于上面的示例 UXML 文档,以下样式规则匹配第二个 Button 元素。

# Cancel {
    border-width: 2px;
    border-color: DarkRed;
    background-color: pink;
}

USS 类选择器

类选择器匹配指定了特定 USS 类的元素。

注意:
类选择器在 USS 中的工作方式与在 CSS 中的工作方式相同。

语法:

类选择器由类名和句点 (.) 前缀组成。类名不能以数字开头。

.class { ...}
注意:
仅当您在 USS 文件中编写选择器时使用句点 (.) 。为 UXML 或 C# 文件中的元素指定类时不要包含它。
例如,使用 <Button class="yellow" /> 而不是 <Button class=".yellow" />

还要避免在类名中使用句点。Unity 的 USS 解析器将句点解释为新类的开始。

例如,如果您创建一个名为 yellow.button 的类,并创建以下 USS 规则:

.yellow.button{...}

解析器将选择器解释为多个选择器,并尝试查找同时匹配 .yellow 类和 .button 类的元素。

当一个元素指定了多个类时,选择器只需要匹配其中一个类来匹配元素。

您还可以在选择器中指定多个类,在这种情况下,元素必须指定了所有这些类才能匹配。有关详细信息,请参阅多个选择器

示例:

对于上面的示例 UXML 文档,下面的样式规则匹配名为 container2 的元素和名为 OK 的按钮元素,并将其背景颜色更改为黄色。

.yellow {
    background-color: yellow;
}

通用选择器

通用选择器(有时称为通配符选择器)匹配任何元素。

语法:

* { ...}

示例:

对于上面的示例 UXML 文档,下面的样式规则匹配每个元素,并将其背景颜色更改为黄色。这包括窗口的主要区域,因为该样式表应用于窗口的根元素。

* {
    background-color: yellow;
}
注意:
因为它测试每个元素,所以通用选择器会影响性能。请谨慎使用。避免将通用选择器与后代选择器一起使用。当您使用该组合时,系统可能必须反复测试许多元素,这会影响性能。

在复杂选择器中使用通用选择器

您可以将通用选择器包含在复杂的选择器中。例如,以下 USS 规则在子选择器中使用了通用选择器,匹配 USS 类为 yellow 的元素的任何子元素下的任何按钮子元素:

.yellow > * > Button{..}

USS 选择器
Complex Selectors