UI gaya dengan USS
pemilih sederhana

Amerika Serikat pilih

Selectors menentukan unsur-unsur yang mempengaruhi aturan AS. Ketika Unity menerapkan lembar gaya ke pohon visual, itu cocok elemen untuk pemilih. Jika elemen cocok dengan pemilih, Unity menerapkan aturan gaya pemilih ke elemen.

USS mendukung beberapa jenis pemilih simple dan complex yang sesuai elemen berdasarkan kriteria yang berbeda, seperti:

  • C# nama kelas
  • Harta sitename property
  • Daftar kelas USS
  • Posisi elemen di pohon visual dan hubungannya dengan elemen lain.

Ini juga mendukung Kelas pseudo yang dapat Anda gunakan untuk memilih elemen yang ada dalam keadaan tertentu.

Jika elemen cocok lebih dari satu pemilih, Unity menerapkan gaya dari mana pun selector takes precedence.

Jenis pemilih yang didukung

USS mendukung satu set pemilih sederhana yang bersifat analog, tetapi tidak identik, untuk pemilih sederhana di CSS. Ini juga mendukung subset pemilih kompleks CSS dan kelas pseudo.

pemilih sederhana

Tabel di bawah ini memberikan referensi cepat pemilih sederhana ASS. Untuk rincian, lihat pemilih sederhana.

Jenis pemilih: Syntax: Matches:
Tipe C# Type {...} Elemen tipe C # tertentu
Kelas USS .class {...} Elemen dengan kelas USS yang ditugaskan
Name #name {..} Elemen dengan atribut name yang ditugaskan
Wildcard * {...} Setiap elemen

Complex selectors

Tabel di bawah ini memberikan referensi cepat pemilih kompleks ASS. Untuk rincian, lihat Complex selectors.

Jenis pemilih: Syntax: Matches:
Descendant selector selector1 selector2 {...} Any keturunan pemilih pertama, pada tingkat berapa pun, yang juga cocok dengan pemilih kedua.
pemilih anak selector1 > selector2 {...} Setiap keturunan direct (anak) dari pemilih pertama yang juga cocok dengan pemilih kedua.
Selector list selector1, selector2, selector3 {..} Setiap elemen yang cocok dengan pemilih dalam daftar. Setiap elemen yang cocok dengan pemilih dalam daftar. Daftar dapat berisi campuran pemilih sederhana atau kompleks.

Pseudo-classes

Tabel di bawah ini memberikan referensi cepat pemilih sederhana ASS. Untuk rincian, lihat Pseudo-classes.

Pseudo-class Cocokkan Elemen saat
:hover Kursor diposisikan atas Elemen.
:active Pengguna berinteraksi dengan Elemen.
:inactive Pengguna berhenti berinteraksi dengan elemen.
:focus Elemen memiliki fokus.
:selected N/A. Unity tidak menggunakan pseudo-state ini.
:disabled Elemen diatur ke enabled == false.
:enabled Elemen diatur ke enabled == true.
:checked Elemen adalah elemen Toggle dan dialihkan.
:root Elemen adalah elemen akar (Elemen tingkat tertinggi di pohon visual).

Gunakan daftar pemilih

Untuk menerapkan gaya yang sama untuk beberapa jenis elemen, Anda dapat menggunakan daftar pemilih dalam aturan gaya apa pun. Daftar pemilih terdiri dari dua atau lebih pemilih yang dipisahkan oleh kommas. Ini dapat mengandung kombinasi pemilih sederhana dan kompleks, dan sesuaikan elemen apa pun yang cocok setidaknya satu pemilih dalam daftar.

Syntax:

selector1, selector2 {...}

Daftar pemilih setara dengan beberapa pemilih yang masing-masing menyatakan aturan gaya yang sama.

Example:

Untuk Contoh dokumen UXML di atas, dua cuplikan AS berikut memiliki efek yang sama.

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

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

Menentukan precedence pemilih

Ketika elemen cocok lebih dari satu pemilih, Unity mempertimbangkan beberapa faktor untuk menentukan mana pemilih mengambil precedence.

Bagaimana Unity menentukan precedence tergantung pada apakah pemilih konflik berada dalam lembar gaya yang sama atau dalam lembaran gaya yang berbeda.

Precedence untuk pemilih dalam lembar gaya yang sama

Ketika elemen cocok dengan beberapa pemilih dari lembar gaya yang sama, pemilih dengan specificity tertinggi mengambil precedence.

Jika kedua pemilih memiliki specificity yang sama, pemilih yang muncul terakhir dalam file AS mengambil precedence.

Precedence untuk selektor dalam lembaran gaya yang berbeda

Ketika elemen cocok dengan beberapa pemilih dalam lembar gaya yang berbeda, Unity menentukan precedence sesuai dengan faktor berikut dalam urutan berikut:

  1. selector The type of style sheet: dari lembar gaya yang ditentukan pengguna mengambil precedence atas selektor dari lembaran gaya Unity default.
  2. Sitemap Jika kedua pemilih berada dalam jenis lembar gaya yang sama, pemilih dengan Selector specificity: tertinggi mengambil precedencespecificity takes precedence
  3. Sitemap Jika kedua pemilih memiliki kekhususan yang sama, pemilih yang style sheet diterapkan terendah dalam hierarki elemen mengambil precedence.The style sheets’ positions in the element hierarchy: If both selectors have the same specificity, the selector whose style sheet is applied lowest in the element hierarchy takes precedence.
  4. Sitemap Jika Anda menerapkan lembaran gaya pada tingkat hierarki yang sama, pemilih yang muncul paling dekat dengan akhir file AS mengambil precedence.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.

Selector specificity

Kekhususan pemilih adalah ukuran relevansi. Semakin tinggi kekhususan, semakin relevan pemilih adalah elemen yang cocok.

  • pemilih NameClass lebih spesifik daripada pemilih .
  • pemilih ClassC# Type lebih spesifik daripada pemilih .
  • selector C# Typewildcard lebih spesifik daripada pemilih * ().

Gaya terapan versus mewarisi gaya

Gaya yang menargetkan elemen secara langsung mengambil precedence atas gaya yang mewarisi elemen, bahkan jika gaya yang diwarisi didefinisikan dalam pemilih dengan kekhususan yang lebih tinggi.

Override pemilih AS

Gaya yang Anda oleskan langsung ke gaya override elemen yang Anda oleskan melalui USS.

Sitemap USS tidak mendukung aturan Note: yang digunakan untuk menimpa deklarasi gaya di CSS.!important rule used to override style declarations in CSS.

Gaya inline

Gaya inline yang berlaku untuk elemen dalam dokumen UXML mengambil precedence atas gaya ASS. Anda dapat memikirkan mereka sebagai memiliki kekhususan yang lebih tinggi daripada pemilih AS.

C# gaya

Gaya yang Anda set di C# override gaya lain, termasuk gaya AS dan gaya inline. Anda dapat memikirkan mereka sebagai memiliki kekhususan tertinggi.

UI gaya dengan USS
pemilih sederhana