本主题使用以下视觉树示例来演示选择器:
简单的选择器可以是通配符,也可以是类型、名称或类名的任意组合。基于上面的视觉树示例,以下列举了一些有效的简单选择器:
#container1
VisualElement
VisualElement#container1
VisualElement.yellow
Button#OK.yellow:hover
TypeName { ...}
使用 Type 选择器可根据 C# 类型来匹配元素。例如,Button
匹配两个按钮。
使用 Type 选择器时,仅指定具体的对象类型。不要在类型名称中包含命名空间。
# name { ...}
使用 Name 选择器可根据 VisualElement.name
属性的值来匹配元素。
例如,#Cancel
根据名称匹配第二个按钮。
元素名称在面板内应该是唯一的。此建议并非强制要求,但使用非唯一名称可能会导致意外匹配。
在为元素分配名称时不要包含 #
。
.class { ...}
使用 Class 选择器可匹配分配给特定类的元素。
要匹配元素,该选择器不必指定分配给元素的所有类。指定单个类名将会匹配分配了同一个类的元素。例如,.yellow
会匹配名为 container2 的元素和名为 OK 的按钮元素。
如果在选择器中指定多个类,则对于要匹配的元素,必须为其分配相同的类名。
在为元素分配类名时不要包含 .
。
类名不能以数字开头。
* { ...}
匹配任何元素。
:pseudo-state { ...}
使用伪状态可匹配进入特定状态时的元素。例如,Button:hover
匹配 Button
类型的视觉元素,但仅当用户将光标放在视觉元素上时才符合条件。
支持的伪状态:
hover
:光标悬停在视觉元素上。active
:正在与视觉元素交互。inactive
:不再与视觉元素交互。focus
:视觉元素具有焦点。selected
:未使用。disabled
:视觉元素设置为 enabled == false
。enabled
:视觉元素设置为 enable == true
。checked
:视觉元素是一个 Toggle
元素并已选中。在其他简单选择器之后指定伪状态。伪状态不能扩展。只支持一组预定义的伪状态。
复杂选择器是用分隔符将简单选择器组合起来的选择器。复杂选择器还包括选择器列表,这些列表提供了将相同样式应用于多个元素的缩写方式。
UIElements 支持以下分隔符:
>
) 匹配的视觉元素是先前选择器匹配的元素的直接后代。例如:
#container1 .yellow
:匹配内部元素和第一个按钮#container2 > .yellow
:仅匹配内部元素使用选择器列表可将相同的样式定义应用于多个元素。每个选择器用逗号分隔,且每个选择器可以是简单或复杂选择器。
例如:
# container1, Button { padding-top:10 }
等同于
# container1 { padding-top: 10 } Button { padding-top: 10}
如果多个选择器匹配相同的元素,则具有最高特异性的选择器优先。对于简单选择器,基本特异性规则为:
*
如果两个选择器相等,则文件中最后出现的选择器优先。
为了确定跨不同文件的选择器特异性,UIElement 会考虑树的遍历顺序(为了应用样式)。具有较高深度和同级索引的元素优先。
当默认样式和用户定义的样式具有相同的选择器时,用户定义的选择器被认为比默认选择器具有更高的特异性。
!important
关键字将被忽略。
C# 中设置的值具有最高的特异性。