Version: 2021.3
Style UI with USS
简单选择器

USS 选择器

选择器确定 USS 规则影响哪些元素。当 Unity 将样式表应用于视觉树时,它会将元素与选择器进行匹配。如果元素与选择器匹配,Unity 会将选择器的样式规则应用于该元素。

USS 支持多种类型简单复杂的选择器,根据不同条件匹配元素,例如:

  • C# 类名称
  • 指定的 name 属性
  • USS 类的列表
  • 元素在视觉树中的位置及其与其他元素的关系。

It also supports pseudo classes that you can use with selectors to target elements that are in a specific state.

如果一个元素匹配多个选择器,Unity 会应用优先的选择器中的样式。

支持的选择器类型

USS 支持一组简单的选择器,它们类似于 CSS 中的简单选择器,但不完全相同。它还支持 CSS 复杂选择器和伪类的一个子集。

简单选择器

下表提供了 USS 简单选择器的快速参考。有关详细信息,请参阅简单选择器

选择器类型: 语法: 匹配:
C# 类型 Type {...} 特定于 C# 类型的元素。
USS 类 .class {...} 具有指定 USS 类的元素
名称 #name {..} 具有指定 name 属性的元素
通配符 * {...} 任意元素

复杂选择器

下表提供了 USS 复杂选择器的快速参考。有关详细信息,请参阅复杂选择器

选择器类型: 语法: 匹配:
后代选择器 selector1 selector2 {...} 在任何级别,第一个选择器的_任何_后代也匹配第二个选择器。
子选择器 selector1 > selector2 {...} 第一个选择器的_直接_后代(子选择器)也匹配第二个选择器。
选择器列表 selector1, selector2, selector3 {..} 与列表中的任何选择器匹配的任何元素。与列表中的任何选择器匹配的任何元素。列表可以包含简单或复杂选择器的任意组合。

伪类

下表提供了 USS 简单选择器的快速参考。有关详细信息,请参阅伪类

伪类 元素匹配条件
:hover 光标位于元素上。
:active 用户与元素交互。
:inactive 用户停止与元素交互。
:focus 元素具有焦点。
:selected N/A. Unity does not support this pseudo-state. Use :checked instead.
:disabled 元素设置为 enabled == false
:enabled 元素设置为 enabled == true
:checked 元素是一个 Toggle 元素并已启用。
:root 元素是根元素(视觉树中的最高层级元素)。

Use selector lists

要将同一样式应用于多种类型的元素,您可以在任何样式规则中使用选择器列表。选择器列表由两个或多个用逗号分隔的选择器组成。它可以包含简单和复杂选择器的任意组合,并匹配与列表中至少一个选择器匹配的任何元素。

语法:

selector1, selector2 {...}

一个选择器列表相当于多个选择器,每个选择器都声明了相同的样式规则。

示例:

对于上面的示例 UXML 文档,以下两个 USS 代码片段具有相同的效果。

# container2, Button {
   background-color: pink;
     border-radius: 10px;
 }
# container2 {
  background-color: pink;
  border-radius: 10px;
}

Button {
  background-color: pink;
  border-radius: 10px;
}

Determine selector precedence

当一个元素匹配多个选择器时,Unity 会考虑几个因素来确定哪个选择器优先。

Unity 如何确定优先级取决于冲突的选择器是在同一个样式表中还是在不同的样式表中。

同一样式表中选择器的优先级

如果一个元素匹配多个选择器,则具有最高特异性的选择器优先。

如果两个选择器具有相同的特异性,USS 文件中最后出现的选择器优先。

不同样式表中选择器的优先级

当一个元素匹配不同样式表中的多个选择器时,Unity 会根据以下因素按以下顺序确定优先级:

  1. 样式表的类型:来自用户定义样式表的选择器优先于来自默认 Unity 样式表的选择器。
  2. 选择器特异性:如果两个选择器都在同一类型的样式表中,则具有最高特异性的选择器优先
  3. 样式表在元素层级结构中的位置:如果两个选择器具有相同的特异性,则其样式表在元素层级结构中最低位置被应用的选择器优先。
  4. 选择器在样式表中的位置:如果在层级结构的同一级别应用两个样式表,则最靠近其 USS 文件末尾的选择器优先。

Selector specificity

选择器特异性是相关性的度量。特异性越高,选择器与其匹配的元素越相关。

  • 名称选择器比选择器特异性高。
  • 选择器比 C# 类型选择器特异性高。
  • C# 类型选择器比通配符 (*) 选择器特异性高。

Applied styles versus inherited styles

直接针对元素的样式优先于元素继承的样式,即使继承的样式是在具有更高特异性的选择器中定义的。

Override USS selectors

直接应用于元素的样式会覆盖通过 USS 应用的样式。

Note: USS does not support the !important rule used to override style declarations in CSS.

内联样式

应用于 UXML 文档中元素的内联样式优先于 USS 样式。您可以认为它们比 USS 选择器具有更高的特异性。

C# 样式

您在 C# 中设置的样式覆盖任何其他样式,包括 USS 样式和内联样式。您可以认为它们具有最高的特异性。

Style UI with USS
简单选择器