Version: 2020.2
样式和 Unity 样式表
简单选择器

USS 选择器

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

USS supports several types of simple and complex selectors that match elements based on different criteria, such as:

  • 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 复杂选择器和伪类的一个子集。

简单选择器

The table below provides a quick reference of USS simple selectors. For details, see Simple selectors.

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

复杂选择器

The table below provides a quick reference of USS complex selectors. For details, see Complex selectors.

选择器类型: 语法: 匹配:
后代选择器 selector1 selector2 {...} 在任何级别,第一个选择器的_任何_后代也匹配第二个选择器。
子选择器 selector1 > selector2 {...} 第一个选择器的_直接_后代(子选择器)也匹配第二个选择器。
选择器列表 selector1, selector2, selector3 {..} Any element that matches any selectors in the list. Any element that matches any selectors in the list. A list can contain any mix of simple and/or complex selectors.

伪类

The table below provides a quick reference of USS simple selectors. For details, see Pseuso-classes.

伪类 元素匹配条件
:hover 光标位于元素上。
:active 用户与元素交互。
:inactive 用户停止与元素交互。
:focus 元素具有焦点。
:selected 不可用。Unity 不使用这种伪状态。
:disabled 元素设置为 enabled == false
:enabled 元素设置为 enabled == true
:checked 元素是一个 Toggle 元素并已启用。
:root 元素是根元素(视觉树中的最高层级元素)。

使用选择器列表

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

语法:

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;
}

确定选择器优先级

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

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

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

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

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

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

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

  1. 样式表的类型:来自用户定义样式表的选择器优先于来自默认 Unity 样式表的选择器。
  2. 选择器特异性:如果两个选择器都在同一类型的样式表中,则具有最高特异性的选择器优先
  3. 样式表在元素层级结构中的位置:如果两个选择器具有相同的特异性,则其样式表在元素层级结构中最低位置被应用的选择器优先。
  4. The selectors’ positions in their style sheets: If both style sheets are applied at the same level of the hierarchy, the selector that appears closest to the end of its USS file takes precedence.

选择器特异性

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

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

应用样式与继承样式

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

覆盖 USS 选择器

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

注意:
USS 不支持用于覆盖 CSS 中的样式声明的 !important 规则。

内联样式

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

C# 样式

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


  • 2020–04–07 页面已修订
  • 2018–11–02 页面已修订
样式和 Unity 样式表
简单选择器