Version: Unity 6.0 (6000.0)
语言 : 中文
选择器列表
选择器优先级

伪类

伪类缩小了选择器的范围,因此它只匹配进入特定状态的元素。

将伪类附加到简单选择器以匹配处于特定状态的特定元素。例如,以下 USS 规则使用 :hover 伪类在用户将指针悬停在 Button 元素上时更改元素颜色。

Button:hover {
    background-color: palegreen;
}

支持的伪类

下表列出了支持的伪类。您不能扩展伪类或创建自定义伪类。

伪类 在以下情况下匹配元素
:hover 光标位于元素上方。
:active 用户与元素交互。
:inactive 用户停下来与元素交互。
:focus 该元素具有焦点。
:selected USS 不支持此伪状态。请改用 :checked
:disabled 该元素处于禁用状态。
:enabled 该元素处于启用状态。
:checked 该元素是 ToggleRadioButton 元素,并且已选中。
:root 该元素是应用了样式表的视觉树中的最高级别元素。

链接伪类

您可以将伪类链接在一起以将相同的样式应用于多个并发状态。例如,以下 USS 规则将 :checked:hover 伪类链接在一起,在用户将指针悬停在选中的 Toggle 元素上时更改元素颜色。

Toggle:checked:hover {
  background-color: yellow;
}

当开关被选中,但指针没有悬停在它上面时,选择器不再匹配。

根伪类

:root 伪类与样式表应用于的最高级别元素匹配。

使用根伪类设置默认值

您可以使用 :root 伪类为元素之间的继承样式设置默认样式值。要查看继承了哪些 USS 属性,请参阅 USS 属性参考

例如,以下 USS 规则设置默认字体。如果将样式表应用于视觉树中的根元素,则任何无法从更具体的样式规则获取字体的元素都会使用该字体。

:root {
  -unity-font: url("../Resources/fonts/OpenSans-Regular.ttf");
}

将自定义属性与根伪类结合使用

:root 伪类的一个常见用途是声明“global”变量(自定义属性),其他样式规则可以使用它来代替特定值。例如,您可以为颜色定义自定义属性并将其用于其他规则:

:root {
  --my-color: #ff0000;
}

Button {
  background-color: var(--my-color);
}

根伪类匹配

在 CSS 中,:root 伪类匹配根元素(即 <HTML>)。在 USS 中,它可以是根元素或视觉树中的任何其他元素。它与其他元素或该元素的子元素不匹配。

例如,如果有以下层级结构:

var myElement = new VisualElement();
var myElementChild = new VisualElement();
myElement.Add(myElementChild);

var myOtherElement = new VisualElement();

如果将样式表添加到 myElement

myElement.stylesheets.Add(myStyleSheet);

:root 选择器匹配 myElement,但不匹配 myElementChildmyOtherElement

如果将样式表显式添加到 myElementChildmyOtherElement

myElementChild.stylesheets.Add(myStyleSheet);
myOtherElement.stylesheets.Add(myStyleSheet);

在这种情况下,:root 选择器匹配 myElementmyElementChildmyOtherElement

其他资源

选择器列表
选择器优先级