UI Toolkit样式选择器

样式选择器（Selector），主要包含样式类选择器（Class Selector）、C# 类选择器（Type Selector）、名称选择器（Name Selector）、通用选择器（Universal Selector）、后代选择器（Descendant Selector）、子选择器（Child Selector）、多重选择器（Multiple Selector）、伪类选择器（Pseudo Class）等。样式选择器官方介绍见→USS selectors

样式类选择器(Class Selector)

Class 选择器是命名以 "." 号开头的选择器（如：.red、.abc、.xyz 等），需要手动绑定到元素上，官方介绍见→Class selectors

创建UI

在 UI Builder 的 Hierarchy 窗口中创建 UI 如下。

显示如下

创建USS文件

在 StyleSheets 窗口点击 "+" 号，选择 Create New USS 选项，如下。选择 USS 文件保存路径，命名为 StyleSelectorDemo。

创建选择器

在 StyleSheets 窗口的 selector 框中输入 ".textColor"，如下。注意：textColor 前面有个点，命名可以随意，如：demo、test 等都行。

按 Enter 键后，创建了 selector，如下。

修改选择器属性

选中 ".textColor" 选择器，在 Inspector 窗口修改文本颜色，如下。

绑定选择器到元素

将 ".textColor" 选择器拖拽到 Hierarchy 或 Viewport 窗口中相关元素上，实现样式选择器与元素的绑定。

也可以通过以下方式绑定元素：选中元素后，在 Inspector 窗口的 Style Class List 中添加 selector，如下。

选择器绑定到元素后，在 Inspector 窗口可以看到元素绑定的选择器，如下。可以通过后面的 "x" 号删除选择器。

显示效果

C#类选择器(Type Selector)

Type 选择器是以元素的 C# 类名命名的选择器（如：Label、Button、VisualElement 等），会自动绑定到对应 Type 的元素上，不需要手动绑定，官方介绍见→Type selectors

创建选择器

在 StyleSheets 窗口创建名为 "Label" 的选择器，如下。

修改选择器的属性

选中 "Label" 选择器，在 Inspector 窗口修改文本样式为斜体，如下。

显示效果

Label 元素会自动绑定 "Label" 选择器，Button 元素则不会，即使手动将 "Label" 选择器拖拽到 Button 元素上，也不会绑定成功。显示效果如下。

名称选择器(Name Selector)

Name 选择器是命名以 "#" 号开头的选择器（如：#Name、#Abc、#Xyz 等），会自动绑定到对应 Name 的元素上，不需要手动绑定，官方介绍见→Name selectors

修改元素名称

新创建的元素默认元素名为空，修改元素名如下。

创建选择器

在 StyleSheets 窗口创建名为 "Label1" 的选择器，如下。

修改选择器属性

选中 "Label1" 选择器，在 Inspector 窗口修改字体大小50，如下。

显示效果

Label1元素会自动绑定 "Label1" 选择器，button元素则不会，即使手动将 "Label1" 选择器拖拽到 button元素上，也不会绑定成功。显示效果如下。

通用选择器(UniverSal Selector)

Universal 选择器是以 "*" 号命名的选择器，会自动绑定到所有元素上，不需要手动绑定，官方介绍见→Universal selectors。

创建选择器

在 StyleSheets 窗口创建名为 "*" 的选择器，如下。

修改选择器属性

选中 "*" 选择器，在 Inspector 窗口修改边框宽度和颜色，如下。

显示效果

复杂选择器(Complex Selector)

复杂选择器是指由多个简单选择器按照特定规则组合而成的选择器。

后代选择器(Descendant Selector)

Descendant 选择器由多个简单选择器通过空格连接而成，它匹配的是某个 UI 元素底下符合规则的所有层级的子元素，官方介绍见→Descendant selectors。

// 在selector1匹配的子元素中匹配selector2, ...
// 选择器的顺序不同匹配的元素也不同
selector1 selector2 {...}

UI搭建

UI 层级结构如下，其中 Background、VE1、VE2、VE3 都是 VisualElement，Label1、Label2、Label3 都是 Label。

创建以下简单选择器。其中，Lable 选择器中修改了字体大小为 30；.red 选择器中修改了背景颜色为红色，并绑定到 VE1，.green 选择器中修改了背景颜色为绿色，并绑定到 VE2；.blue 选择器中修改了背景颜色为蓝色，并绑定到 VE3。

UI显示如下

创建Descendant选择器

在 StyleSheets 窗口创建以下选择器。

• "#VE1 Label" 选择器：修改字体为斜体；

• ".green Label" 选择器：修改字体颜色为红色；

• "#Background *" 选择器：设置 3px 的黄色边框。

显示效果

可以看到，"#VE1 Label" 选择器匹配的是 Label1 元素，".green Label" 选择器匹配的是 Label2 元素，"#Background *" 选择器匹配的是 VE1、VE2、VE3、Label1、Label2、Label3 元素。

子选择器(Child Selector)

Child 选择器由多个简单选择器通过 " > " 连接而成，它匹配的是某个 UI 元素底下符合规则的第一层级的子元素，官方介绍见→Child selectors。

// 在selector1匹配的子元素中匹配selector2, ...
// 选择器的顺序不同匹配的元素也不同
selector1 > selector2 {...}

创建Child选择器

在 StyleSheets 窗口创建以下选择器。

• "#VE1 > Label" 选择器：修改字体为斜体；

• ".green > Label" 选择器：修改字体颜色为红色；

• "#Background > *" 选择器：设置 3px 的黄色边框。

显示效果

可以看到，"#VE1 > Label" 选择器匹配的是 Label1 元素，".green > Label" 选择器匹配的是 Label2 元素，"#Background > *" 选择器匹配的是 VE1、VE2、VE3 元素。

多重选择器(Multiple Selector)

Multiple 选择器由多个简单选择器直接而成，它匹配的是符合所有规则的元素，官方介绍见→Multiple selectors。

// 匹配同时满足selector1、selector2、...的元素
// 选择器的顺序不同匹配的元素相同
selector1selector2 {...}

创建Multiple选择器

在 StyleSheets 窗口创建以下选择器。

• "Label#Label1" 选择器：修改字体为斜体；

• "VisualElement.green" 选择器：设置圆角半径 Radius 为 20 px；

• "Label*" 选择器：设置 3px 的黄色边框。

显示效果

可以看到，"Label#Label1" 选择器匹配的是 Label1 元素，"VisualElement.green" 选择器匹配的是 VE2 元素，"Label*" 选择器匹配的是 Label1、Label1、Label3 元素。

伪类选择器(Pseudo Class)

Pseudo 选择器是指由简单选择器和状态符连接而成，它匹配的是特定状态下的元素，官方介绍见→Pseudo-classes。

// 匹配满足selector且进入state状态的元素
selector:state {...}

状态符主要以下几种。

:hover：光标悬浮在元素上。

:active：用户与元素交互。

:inactive：用户停止与元素交互。

:focus：元素获得焦点。

:disabled：元素进入 disabled 状态。

:enabled：元素进入 enabled 状态。

:checked：Toggle 或 RadioButton 被选中。

:root：元素成为根元素。

创建Pesudo选择器

在 StyleSheets 窗口创建以下选择器。

• "#Label1:hover" 选择器：修改字体为斜体；

• ".green:hover" 选择器：设置圆角半径 Radius 为 20 px；

• "*:hover" 选择器：设置 3px 的黄色边框。

显示效果

可以看到，"#Label1:hover" 选择器匹配的是进入 hover 状态的 Label1 元素，".green:hover" 选择器匹配的是进入 hover 状态的 VE2 元素，"*:hover" 选择器匹配的是进入 hover 状态的 VE1、VE2、VE3、Label1、Label1、Label3 元素。

样式切换

样式选择器的添加和删除

// 如果visualElement有StyleName样式, 就将其删除; 如果visualElement没有StyleName样式, 就将其添加
visualElement.ToggleInClassList("StyleName"); // StyleName是样式选择器名, 不需要前面的"."

说明：只能添加和删除样式类选择器（以 "." 命名开头的选择器），其他选择器都是自动绑定到元素上的。

USS样式文件替换

VisualElement root = GetComponent<UIDocument>().rootVisualElement; // 根容器
VisualElementStyleSheetSet styleSheetSet = root.styleSheets; // 样式集合
styleSheetSet.Remove(oldStyleSheet); // 移除旧样式, oldStyleSheet是StyleSheet类型变量, 指向一个uss文件
styleSheetSet.Add(newlightTheme); // 添加新样式, newStyleSheet是StyleSheet类型变量, 指向一个uss文件

样式应用

public class SwitchTheme : MonoBehaviour
{
    private VisualElement root;
    private RadioButtonGroup switchThemeElement;
    private VisualElementStyleSheetSet styleSheetSet;

    private StyleSheet lightTheme;
    private StyleSheet darkTheme;

    private void Awake()
    {
        lightTheme = Resources.Load<StyleSheet>("LightTheme");
        darkTheme = Resources.Load<StyleSheet>("DarkTheme");
        root = GetComponent<UIDocument>().rootVisualElement;
        styleSheetSet = root.styleSheets;
        Label themeLabel = root.Q<Label>("Theme");
        themeLabel.RegisterCallback<ClickEvent>(OnClick);
        switchThemeElement = root.Q<RadioButtonGroup>("SwitchTheme");
        switchThemeElement.RegisterValueChangedCallback(OnValueChange);
    }

    private void OnValueChange(ChangeEvent<int> evt)
    {
        if (evt.newValue == 0)
        {
            styleSheetSet.Remove(darkTheme);
            styleSheetSet.Add(lightTheme);
        }
        else {
            styleSheetSet.Remove(lightTheme);
            styleSheetSet.Add(darkTheme);

        }
    }

    private void OnClick(ClickEvent evt)
    {
        switchThemeElement.ToggleInClassList("hide");
    }
}