Детские селекторы

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 выглядит следующим образом:

Дополнительные ресурсы

Наилучшая практика для USS