USS 선택자

선택자는 USS 규칙이 영향을 미치는 요소를 결정합니다. Unity는 시각적 트리에 스타일시트를 적용할 때 요소를 선택자와 매칭합니다. 요소가 선택자와 매칭되면 Unity는 선택자의 스타일 규칙을 요소에 적용합니다.

USS supports several types of simple and complex selectors that match elements based on different criteria, such as:

• C# 클래스명
• 할당된 name 프로퍼티
• USS 클래스 리스트
• 시각적 트리의 요소 포지션, 그리고 다른 요소와의 관계

It also supports pseudo classes that you can use with selectors to target elements that are in a specific state.

요소가 두 개 이상의 선택자와 매칭되는 경우 Unity는 우선권을 가진 선택자의 스타일을 적용합니다.

지원되는 선택자 타입

USS는 CSS의 단순 선택자와 유사하지만, 동일하지는 않은 단순한 선택자 세트를 지원합니다. 또한 일부 CSS 복잡 선택자와 유사 클래스도 지원합니다.

단순 선택자

The table below provides a quick reference of USS simple selectors. For details, see Simple selectors.

선택자 타입:	구문:	매칭:
C# 타입	Type {...}	특정 C# 타입의 요소
USS 클래스	.class {...}	할당된 USS 클래스가 있는 요소
이름	#name {..}	할당된 name 속성이 있는 요소
와일드카드	* {...}	모든 요소

복잡 선택자

The table below provides a quick reference of USS complex selectors. For details, see Complex selectors.

선택자 타입:	구문:	매칭:
자손 선택자	selector1 selector2 {...}	모든 수준에서 두 번째 선택자와 매칭되는 첫 번째 선택자의 모든 자손.
자식 선택자	selector1 > selector2 {...}	두 번째 선택자와도 매칭되는 첫 번째 선택자의 모든 직접 자손(자식).
선택자 리스트	selector1, selector2, selector3 {..}	Any element that matches any selectors in the list. Any element that matches any selectors in the list. A list can contain any mix of simple or complex selectors.

유사 클래스

The table below provides a quick reference of USS simple selectors. For details, see Pseudo-classes.

유사 클래스	다음의 경우에 요소와 매칭
:hover	커서가 요소의 위에 위치합니다.
:active	사용자는 요소와 상호작용합니다.
:inactive	사용자는 요소와의 상호작용을 중지합니다.
:focus	요소에 포커스가 있습니다.
:selected	해당 없음. Unity는 이 유사 상태를 사용하지 않습니다.
:disabled	요소가 enabled == false로 설정됩니다.
:enabled	요소가 enabled == true로 설정됩니다.
:checked	요소가 토글 요소이고 토글되어 있습니다.
:root	요소가 루트 요소(시각적 트리의 최상단 요소)입니다.

선택자 리스트 사용

여러 타입의 요소에 동일한 스타일을 적용하려면 원하는 스타일 규칙에서 선택자 리스트를 사용하십시오. 선택자 리스트는 쉼표로 구분된 두 개 이상의 선택자로 구성됩니다. 또한 단순 및 복잡 선택자의 모든 조합을 포함할 수 있으며, 리스트에서 하나 이상의 선택자와 매칭되는 모든 요소와 매칭됩니다.

구문:

selector1, selector2 {...}

선택자 리스트는 동일한 스타일 규칙을 각각 선언하는 여러 선택자와 동일합니다.

예제:

위의 예제 UXML 문서에서 다음의 두 USS 스니핏은 동일한 효과를 가집니다.

# container2, Button {
   background-color: pink;
     border-radius: 10px;
 }

# container2 {
  background-color: pink;
  border-radius: 10px;
}

Button {
  background-color: pink;
  border-radius: 10px;
}

선택자 우선권 결정

요소가 두 개 이상의 선택자와 매칭되면 Unity는 몇 가지 요소를 고려하여 어느 선택자가 우선권을 가질지 결정합니다.

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

동일한 스타일시트의 선택자에 대한 우선권

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

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

다른 스타일시트의 선택자에 대한 우선권

요소가 다른 스타일시트의 여러 선택자와 매칭되면 Unity는 다음 요소에 따라 다음 순서로 우선권을 결정합니다.

1. 스타일시트의 타입: 사용자 정의 스타일시트의 선택자가 기본 Unity 스타일시트보다 더 높은 우선권을 갖습니다.
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 that appears closest to the end of its USS file takes precedence.

선택자 특정성

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

• 이름 선택자는 클래스 선택자보다 더 구체적입니다.
• 클래스 선택자는 C# 타입 선택자보다 더 구체적입니다.
• C# 타입 선택자는 와일드카드(*) 선택자보다 더 구체적입니다.

적용된 스타일 vs. 상속된 스타일

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

USS 선택자 오버라이드

요소에 직접 적용하는 스타일은 USS를 통해 적용하는 스타일을 오버라이드합니다.

참고:
USS는 CSS에서 스타일 선언을 오버라이드하는 데 사용되는 !important 규칙을 지원하지 않습니다.

인라인 스타일

UXML 문서의 요소에 적용하는 인라인 스타일은 USS 스타일보다 더 높은 우선권을 갖습니다. USS 선택자보다 특정성이 더 높다고 간주할 수 있습니다.

C# 스타일

C#에서 설정한 스타일은 USS 스타일, 인라인 스타일 등을 비롯한 다른 모든 스타일을 오버라이드합니다. 특정성이 가장 높다고 간주할 수 있습니다.

---

• 2020–04–07 페이지 수정됨
• 2018–11–02 페이지 수정됨