Complex Selectors

USS mendukung jenis pemilih kompleks berikut:

• Combinators menggabungkan pemilih sederhana untuk mencocokkan elemen yang memiliki hubungan khusus satu sama lain. Descendant selectors dan child selectors adalah pemilih kompleks yang menggunakan combinator.
• Multiple selectors menentukan dua atau lebih pemilih yang harus ditugaskan untuk elemen untuk cocok.
• Selector lists menerapkan aturan gaya yang sama untuk beberapa pemilih.

Sitemap Halaman ini menjelaskan setiap jenis pemilih kompleks dan memberikan sintaks dan contoh. Ini menggunakan dokumen UXML berikut untuk menunjukkan bagaimana elemen pencocokan pemilih sederhana. This page describes each type of complex selector and provides syntax and examples. It uses the following UXML document to demonstrate how simple selectors match elements.

<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>

Tidak ada gaya yang diterapkan, dokumen UXML menghasilkan UI(User Interface) Memungkinkan pengguna untuk berinteraksi dengan aplikasi Anda. Unity saat ini mendukung tiga sistem UI. More info
Lihat di Glossary yang ditunjukkan di bawah ini.

Note:
Contoh gambar termasuk margin dan perbatasan biru tipis untuk membantu mengidentifikasi elemen individu untuk tujuan demonstrasi.

Catalog

pemilih keturunan terdiri dari dua pemilih sederhana yang dipisahkan oleh karakter ruang (`). Ini cocok dengan keturunan pemilih pertama yang juga cocok dengan pemilih kedua.

Syntax:

selector1 selector2 {...}

Example:

Untuk Contoh dokumen UXML di atas, aturan gaya berikut cocok dengan elemen dalam dan tombol pertama.

#container1 .yellow {
  background-color: yellow;
}

Note:
Hindari menggunakan pemilih keturunan dengan pemilih Universal. Ketika Anda menggunakan kombinasi, sistem dapat menguji sejumlah besar elemen berulang, yang dapat mempengaruhi kinerja.

Pemilihan anak

pemilih anak terdiri dari dua pemilih sederhana yang dipisahkan oleh braket sudut kanan (>). Ini cocok dengan keturunan langsung dari pemilih pertama yang juga cocok dengan pemilih kedua.

Syntax:

selector1 > selector2 {...}

Example:

Untuk Contoh dokumen UXML di atas, aturan gaya berikut hanya cocok dengan elemen dalam.

#container1 > .yellow {
  background-color: yellow;
}

Beberapa pemilih

Beberapa pemilih terdiri dari dua atau lebih pemilih sederhana dengan tidak ada yang memisahkan mereka. Ini cocok dengan elemen apa pun yang cocok dengan semua pemilih sederhana.

Syntax:

selector1selector2 {...}

Example:

Untuk Contoh dokumen UXML di atas, aturan gaya berikut cocok dengan tombol pertama.

Button.yellow {
  background-color: yellow;
}

Sistem UI tidak dapat membuat beberapa kombinasi pemilih. Untuk beberapa pemilih untuk bekerja seperti yang diharapkan, parser AS harus dapat membedakan setiap pemilih dalam kombinasi.

Misalnya, aturan USS berikut menggabungkan dua pemilih kelas C #: ListView, dan Button.

ListViewButton{...}

Karena, parser AS tidak dapat memisahkan dua kelas C #, itu menafsirkan mereka sebagai satu kelas yang disebut ListViewButton, yang bukan hasil yang diinginkan.

Anda dapat dengan bebas menggabungkan Pilih kelas AS dan nama pemilih dalam beberapa pemilih. Karena mereka diawali dengan periode (.) dan tanda nomor (#) masing-masing, parser dapat dengan jelas mengidentifikasi mereka. Seleksi kelas C# tidak memiliki karakter mengidentifikasi, sehingga Anda hanya dapat menggunakan salah satu dari mereka dalam beberapa pemilih, dan harus menjadi pemilih pertama dalam kombinasi. Contoh:

ListView.yellow#vertical-list{...}