Псевдоклассы

Псевдокласс сужает область действия селектора так, чтобы он соответствовал элементам только в определённом состоянии.

Добавьте псевдокласс к простому селектору, чтобы он соответствовал элементам только в определённом состоянии. Например, в следующем правиле USS используется :hover псевдокласс, чтобы изменить цвет Button элементы, когда пользователь наводит на них указатель.

Button:hover {
    background-color: palegreen;
}

Окно Unity Editor с зеленой кнопкой OK и пустым флажком.

Вы можете установить и получить псевдо-state элемента. Например, см. Проверка псевдо-state контроля.

Поддерживаемые псевдокласы

В следующей таблице перечислены поддерживаемые псевдоклассы. Вы не можете расширять псевдоклассы или создавать собственные.

Pseudo-class	Соответствует элементу, когда
`:hover`	Курсор располагается над элементом.
`:active`	Пользователь взаимодействует с элементом, который является Кнопка, RadioButton, или Переключить.
`:inactive`	Пользователь останавливается, чтобы взаимодействовать с элементом.
`:focus`	Элемент имеет фокус.
`:selected`	USS не поддерживает псевдо-state. Используйте `:checked` вместо этого.
`:disabled`	Элемент находится в отключённом состоянии.
`:enabled`	Элемент находится во включённом состоянии.
`:checked`	Элемент является элементом Переключить или RadioButton и выбран.
`:root`	Элемент является элементом самого высокого уровня в визуальном дереве, к которому применена таблица стилей.

Цепные псевдоклассы

Вы можете цепить псевдо-классы вместе, чтобы применить один и тот же стиль к нескольким одновременным состояниям. Например, следующее правило USS цепляет псевдо-классы :checked и :hover вместе, чтобы изменить цвет отмеченных элементов Toggle, когда пользователь наводит на них указатель мыши.

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

Окно Unity Editor с кнопкой OK и желтым выделенным флажком с курсором мыши на нем.

Когда переключатель установлен, но указатель не находится над ним, селектор больше не соответствует.

Окно Unity Editor с кнопкой OK и флажок без выделения.

Псевдокласс root

:root псевдокласс соответствует самому верхнему элементу, к которому применяется таблица стилей.

Задание значений по умолчанию через псевдокласс root

Вы можете использовать :root псевдокласс, чтобы задать значения по умолчанию для наследуемых стилей у всех элементов. Какие свойства USS наследуются, см. в USS ссылка на свойства.

Например, следующее правило USS устанавливает шрифт по умолчанию. Если вы примените таблицу стилей к корневому элементу в визуальном дереве, любой элемент, который не получает свой шрифт из более конкретного правила стилей, будет использовать этот шрифт.

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

Использование пользовательских свойств с псевдоклассом root

Общее использование для :root псевдокласса — объявить «глобальные» переменные (настраиваемые свойства), которые могут использоваться другими правилами стиля вместо конкретных значений. Например, вы можете определить пользовательское свойство для цвета и использовать его в других правилах:

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

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

Сопоставление псевдокласса root

В 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, но не myElementChild и myOtherElement.

Если вы явно добавите таблицу стилей к myElementChild и myOtherElement:

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

В этом случае селектор :root соответствует myElement, myElementChildи myOtherElement.