Version: 2022.3
언어: 한국어
Descendant selectors
Multiple selectors

Child selectors

USS child selectors match elements that are the child of another element in the visual tree.

구문

A child selector consists of multiple simple selectors separated by >.

selector1 > selector2 {...}

You can include the wildcard selector in complex selectors. For example, the following USS rule uses the wildcard selector in a child selector. This USS rule matches buttons that are children of elements that are children of an element with the USS class yellow assigned to it.

.yellow > * > Button{..}

예제

To demonstrate how simple selectors match elements, here is an example UI Document.

<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>

With no styles applied, the UI looks like the following:

Example buttons with margins and thin blue borders.
Example buttons with margins and thin blue borders.

The following child selector style rule matches only the inner element. Element #OK, which has .yellow class, is a child of element #container2. #container2 is child of element #container1. Therefore, there is no direct descendant of #container1 that matches the .yellow selector.

# container1 > .yellow {
  background-color: yellow;
}

The UI looks like the following when you apply the style:

The container2 has a yellow background color.
The container2 has a yellow background color.

추가 리소스

Descendant selectors
Multiple selectors
Copyright © 2023 Unity Technologies
优美缔软件(上海)有限公司 版权所有
"Unity"、Unity 徽标及其他 Unity 商标是 Unity Technologies 或其附属机构在美国及其他地区的商标或注册商标。其他名称或品牌是其各自所有者的商标。
公安部备案号:
31010902002961