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# 类型匹配元素。
注意: |
---|
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
属性的值匹配元素。
VisualElement.name
设置元素的名称。<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 中的工作方式与在 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{..}
Did you find this page useful? Please give it a rating:
Thanks for rating this page!
What kind of problem would you like to report?
Thanks for letting us know! This page has been marked for review based on your feedback.
If you have time, you can provide more information to help us fix the problem faster.
Provide more information
You've told us this page needs code samples. If you'd like to help us further, you could provide a code sample, or tell us about what kind of code sample you'd like to see:
You've told us there are code samples on this page which don't work. If you know how to fix it, or have something better we could use instead, please let us know:
You've told us there is information missing from this page. Please tell us more about what's missing:
You've told us there is incorrect information on this page. If you know what we should change to make it correct, please tell us:
You've told us this page has unclear or confusing information. Please tell us more about what you found unclear or confusing, or let us know how we could make it clearer:
You've told us there is a spelling or grammar error on this page. Please tell us what's wrong:
You've told us this page has a problem. Please tell us more about what's wrong:
Thank you for helping to make the Unity documentation better!
Your feedback has been submitted as a ticket for our documentation team to review.
We are not able to reply to every ticket submitted.