USS поддерживает следующие типы сложных селекторов:
- Комбинаторы объединяют простые селекторы для сопоставления элементов, имеющих определенное отношение друг к другу. Селекторы потомков и дочерние селекторы — это сложные селекторы, использующие комбинаторы.
- Несколько селекторов определяют два или более селектора, которые должны быть назначены элементу, чтобы элемент соответствовал.
- Списки селекторов применяют одни и те же правила стиля к нескольким селекторам.
На этой странице описывается каждый тип сложного селектора, а также приводится синтаксис и примеры. Он использует следующий документ UXML, чтобы продемонстрировать, как простые селекторы соответствуют элементам.
<UXML xmlns="UnityEngine.UIElements">
<VisualElement name="container1">
<VisualElement name="container2" class="yellow">
<Button name="OK" class="yellow" text="OK" />
<Button name="Cancel"class="" text="Cancel" />
</VisualElement>
</VisualElement>
</UXML>
Без применения стилей документ UXML создает UI(пользовательский интерфейс). Позволяет пользователю взаимодействовать с вашим приложением. Подробнее
См. приведенный ниже Словарь.
| Примечание: |
|---|
| Примеры изображений включают поля и тонкие синие границы, чтобы помочь идентифицировать отдельные элементы в демонстрационных целях. |
Селекторы потомков
Селектор-потомок состоит из двух простых селекторов, разделенных пробелом (` `). Он соответствует всем потомкам первого селектора, которые также соответствуют второму селектору.
Синтаксис:
selector1 selector2 {...}
Пример:
Для приведенного выше примера документа UXML следующее правило стиля соответствует как внутреннему элементу, так и первой кнопке.
#container1 .yellow {
background-color: yellow;
}
| Примечание: |
|---|
| Избегайте использования селектора потомков с универсальным селектором. При использовании этой комбинации система может многократно тестировать большое количество элементов, что может повлиять на производительность. |
Дочерние селекторы
Дочерний селектор состоит из двух простых селекторов, разделенных правой угловой скобкой (>). Он соответствует любым прямым потомкам первого селектора, которые также соответствуют второму селектору.
Синтаксис:
selector1 > selector2 {...}
Пример:
Для приведенного выше примера документа UXML следующее правило стиля соответствует только внутреннему элементу.
#container1 > .yellow {
background-color: yellow;
}
Несколько селекторов
Множественный селектор состоит из двух или более простых селекторов, которые ничем не разделены. Он соответствует всем элементам, которые соответствуют всем простым селекторам.
Синтаксис:
selector1selector2 {...}
Пример:
Для приведенного выше примера документа UXML следующее правило стиля соответствует первой кнопке.
Button.yellow {
background-color: yellow;
}
Система пользовательского интерфейса не может анализировать некоторые комбинации нескольких селекторов. Чтобы множественный селектор работал должным образом, синтаксический анализатор USS должен различать каждый селектор в комбинации.
Например, следующее правило USS объединяет два селектора классов C#: ListView и Button.
ListViewButton{...}
Поскольку синтаксический анализатор USS не может разделить два класса C#, он интерпретирует их как один класс с именем ListViewButton, что не является желаемым результатом.
Вы можете свободно комбинировать селекторы классов USS и селекторы имен в нескольких селекторах. Поскольку они имеют префикс точки (.) и знака числа (#) соответственно, синтаксический анализатор может четко их идентифицировать. Селекторы классов C# не имеют идентифицирующего символа, поэтому в множественном селекторе можно использовать только один из них, и он должен быть первым селектором в комбинации. Например:
ListView.yellow#vertical-list{...}