유사 클래스
유사 클래스는 특정 상태로 전환하는 요소와만 매칭되도록 선택자의 범위를 좁힙니다.
특정 상태일 때 특정 요소와 매칭되도록 유사 클래스를 단순 선택자에 추가합니다. 예를 들어 다음 USS 규칙은 :hover 유사 클래스를 사용하여 사용자가 포인터를 위에 올려 놓을 때 Button 요소의 컬러를 변경합니다.
Button:hover {
background-color: palegreen;
}
지원되는 유사 클래스
The following table lists supported pseudo-classes. You can’t extend pseudo-classes or create custom ones.
| 유사 클래스 | Matches an element when |
|---|---|
:hover |
The cursor is positioned over the element. |
:active |
A user interacts with the element. |
:inactive |
A user stops to interact with the element. |
:focus |
요소에 포커스가 있습니다. |
:selected |
USS doesn’t support this pseudo-state. Use :checked instead. |
:disabled |
The element is in a disabled state. |
:enabled |
The element is in an enabled state. |
:checked |
The element is a Toggle element and it’s toggled on. |
:root |
The element is the highest-level element in the visual tree. |
Chain pseudo-classes
유사 클래스를 서로 체이닝하여 여러 동시 상태에 동일한 스타일을 적용할 수 있습니다. 예를 들어 다음 USS 규칙은 :checked 및 :hover 유사 클래스를 서로 체이닝하면 사용자가 포인터를 위에 올려 놓을 때 체크 표시된 Toggle 요소의 컬러를 변경할 수 있습니다.
Toggle:checked:hover {
background-color: yellow;
}
토글이 체크 표시되었지만, 포인터를 위에 올려 놓지 않으면 선택자가 더 이상 매칭되지 않습니다.
루트 유사 클래스
The :root pseudo-class matches the highest element in a visual tree. It’s slightly different from other supported pseudo-classes because you use it by itself to define default styles for the elements the style sheet affects.
예를 들어 다음 USS 규칙은 기본 폰트를 설정합니다. 특정 스타일 규칙에서 폰트를 가져오지 않는 모든 요소가 이 폰트를 사용합니다.
:root {
-unity-font: url("../Resources/fonts/OpenSans-Regular.ttf");
}
:root 선택자의 일반적인 용도는 다른 스타일 규칙이 특정 값 대신에 사용할 수 있는 “전역” 변수(커스텀 프로퍼티)를 선언하는 것입니다.
추가 리소스
Copyright © 2023 Unity Technologies
优美缔软件（上海）有限公司 版权所有
"Unity"、Unity 徽标及其他 Unity 商标是 Unity Technologies 或其附属机构在美国及其他地区的商标或注册商标。其他名称或品牌是其各自所有者的商标。
公安部备案号:
31010902002961