Псевдоклассы
Псевдокласс сужает область действия селектора так, чтобы он соответствовал элементам только в определённом состоянии.
Добавьте псевдокласс к простому селектору, чтобы он соответствовал элементам только в определённом состоянии. Например, в следующем правиле USS используется :hover псевдокласс, чтобы изменить цвет Button элементы, когда пользователь наводит на них указатель.
Button:hover {
background-color: palegreen;
}
Вы можете установить и получить псевдо-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;
}
Когда переключатель установлен, но указатель не находится над ним, селектор больше не соответствует.
Псевдокласс 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.