Детские селекторы
USS дочерние селекторы соответствуют элементам, которые являются дочерними элементами другого элемента в визуальное дерево.
Синтаксис
Дочерний селектор состоит из нескольких простых селекторов, разделенных символом >.
selector1 > selector2 {...}
Вы можете включить селектор подстановки в сложные селекторы. Например, следующее правило USS использует селектор подстановки в выбор ребенка. Это правило USS соответствует кнопкам, которые являются потомками элементов, являющихся потомками элемента с USS-классом yellow назначенные ему.
.yellow > * > Button{..}
Примечание: USS не поддерживает выбор n-го дочернего элемента элементов с одинаковым именем. Использование селекторы классов или уникальные имена элементов.
Пример
Чтобы продемонстрировать, как простые селекторы соответствуют элементам, вот пример Документа UI.
<UXML xmlns="UnityEngine.UIElements">
<VisualElement name="container1">
<VisualElement name="container2" class="yellow">
<Button name="OK" class="yellow" text="OK" />
<Button name="Cancel" text="Cancel" />
</VisualElement>
</VisualElement>
</UXML>
Без применения стилей UI выглядит следующим образом:
Следующее правило стиля дочернего селектора соответствует только внутреннему элементу. #OK с .yellow класс является потомком элемента #container2. #container2 является дочерним элементом #container1Однако, поскольку #OK не является прямым потомком #container1, это не соответствует .yellow селектор при применении с дочерним селектором из #container1.
#container1 > .yellow {
background-color: yellow;
}
При применении стиля UI выглядит следующим образом:
