Selector precedence

When an element matches more than one selector, Unity considers several factors to determine which selector takes precedence.

Unity가 우선 순위를 결정하는 방법은 충돌하는 선택자가 동일한 스타일시트에 있는지 또는 다른 스타일시트에 있는지에 따라 다릅니다.

Precedence for selectors in the same style sheet

요소가 동일한 스타일시트의 여러 선택자와 매칭되면 특정성이 가장 높은 선택자가 우선권을 갖습니다.

두 개 선택자의 특정성이 동일하면 USS 파일에서 마지막으로 나타나는 선택자가 우선권을 갖습니다.

Precedence for selectors in different style sheets

When an element matches multiple selectors in different style sheets, Unity determines precedence according to the following factors in this order:

1. The type of style sheet: Selectors from user-defined style sheets takes precedence over selectors from default Unity style sheets.
2. 선택자 특정성: 두 선택자의 스타일시트 타입이 동일하면 특정성이 가장 높은 선택자가 우선권을 갖습니다.
3. 요소 계층 구조에서 스타일시트의 위치: 두 선택자의 특정성이 동일하면 스타일시트가 요소 계층 구조의 가장 아래에서 적용된 선택자가 우선권을 갖습니다.
4. The selectors’ positions in their style sheets: If you apply both style sheets at the same level of the hierarchy, the selector closest to the end of its USS file takes precedence.

Selector specificity

선택자 특정성은 관련성의 척도입니다. 특정성이 높을수록 선택자가 매칭하는 요소와의 관련성이 더 높습니다.

• Name selectors are more specific than Class selectors.
• Class selectors are more specific than Type selectors.
• Type selectors are more specific than the Universal (*) selector.
• Universal selectors have the lowest specificity.

Style overrides

You can style an element in UI Toolkit by the following:

• In a USS file, write a selector that can affect the button.
• In the UXML document where the button is defined, set inline styles.
• In a C# script, get a reference to a button and set its inline style.
• For an inherited property, the element gets the value from its parent element.

Applied styles override inherited styles

요소를 직접 대상으로 하는 스타일은 요소가 상속하는 스타일보다 더 높은 우선권을 갖습니다. 이는 상속된 스타일이 특정성이 더 높은 선택자에서 정의되었어도 마찬가지입니다.

Inline styles override USS styles

Inline styles that you apply to elements in a UXML document take precedence over USS styles. They have a higher specificity than USS selectors.

Note: USS doesn’t support the !important rule used to override style declarations in CSS.

C# styles override inline and USS styles

Styles that you set in a C# script override USS styles and inline styles set in a UXML document. They have the highest specificity.

추가 리소스

• Inline styles vs StyleSheets
• Apply styles in C# scripts
• Best practices for USS