선택자는 USS 규칙이 영향을 미치는 요소를 결정합니다. Unity는 시각적 트리에 스타일시트를 적용할 때 요소를 선택자와 매칭합니다. 요소가 선택자와 매칭되면 Unity는 선택자의 스타일 규칙을 요소에 적용합니다.
USS supports several types of simple and complex selectors that match elements based on different criteria, such as:
name
프로퍼티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는 다음 요소에 따라 다음 순서로 우선권을 결정합니다.
선택자 특정성은 관련성의 척도입니다. 특정성이 높을수록 선택자가 매칭하는 요소와의 관련성이 더 높습니다.
*
) 선택자보다 더 구체적입니다.요소를 직접 대상으로 하는 스타일은 요소가 상속하는 스타일보다 더 높은 우선권을 갖습니다. 이는 상속된 스타일이 특정성이 더 높은 선택자에서 정의되었어도 마찬가지입니다.
요소에 직접 적용하는 스타일은 USS를 통해 적용하는 스타일을 오버라이드합니다.
참고: |
---|
USS는 CSS에서 스타일 선언을 오버라이드하는 데 사용되는 !important 규칙을 지원하지 않습니다. |
UXML 문서의 요소에 적용하는 인라인 스타일은 USS 스타일보다 더 높은 우선권을 갖습니다. USS 선택자보다 특정성이 더 높다고 간주할 수 있습니다.
C#에서 설정한 스타일은 USS 스타일, 인라인 스타일 등을 비롯한 다른 모든 스타일을 오버라이드합니다. 특정성이 가장 높다고 간주할 수 있습니다.