Child selectors
Match elements that are children of another element in the visual tree.
阅读时间1 分钟最后更新于 1 个月前
USS child selectors match elements that are the child of another element in the visual tree.
Syntax
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 assigned to it.
yellow.yellow > * > Button{..}
注意
USS doesn’t support selecting the nth child of elements with the same name. Use class selectors or unique element names instead.
Example
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.
The following child selector style rule matches only the inner element. Element with the class is a child of element . is child of element . However, because is not a direct descendant of , it doesn't match the selector when applied with a child selector from .
#OK.yellow#container2#container2#container1#OK#container1.yellow#container1#container1 > .yellow { background-color: yellow;}
The UI looks like the following when you apply the style:
The container2 has a yellow background color.