Kelas :dir()pseudo dalam CSS memungkinkan elemen dipilih berdasarkan arah bahasa, seperti yang ditentukan dalam markup HTML. Hanya ada dua arah bahasa yang dapat mengalir dalam dokumen, iaitu kiri-ke-kanan dan kanan-ke-kiri. Anggaplah ini sebagai cara untuk menggayakan elemen yang dibezakan oleh arah bahasa yang berbeza.
.item:dir(rtl) ( background: red; color: #fff; )Kelas pseudo hanya menerima satu nilai dan akan kembali nol jika lebih dari satu nilai dimasukkan.
Lihat Pemilih pen: dir pseudo oleh Geoff Graham (@geoffgraham) di CodePen.
:dir(rtl) vs. (dir=rtl)
Kita juga dapat memilih elemen berdasarkan arah bahasanya dengan menggunakan pemilih pertanyaan padanan:
.item(dir=rtl) ( background: red; color: #fff; )Itu memang berfungsi, tetapi berbeza dengan :dir(rtl)kerana ia hanya memilih elemen dengan apa yang ditentukan secara tegas dalam markup HTML. Di sisi lain, :dir(rtl)akan mengetahui pilihan bahasa ejen pengguna dan memilih elemen tersebut tanpa dinyatakan secara jelas dalam HTML.
Ini adalah masalah besar kerana elemen yang tidak menyatakan arah bahasa secara eksplisit akan mewarisi dirsifat nenek moyang terdekatnya yang mengandungi satu. Itu boleh menyebabkan senario di mana penggunaan (dir=rtl)memilih elemen tambahan daripada yang anda mahukan.
Sokongan Penyemak Imbas
Data sokongan penyemak imbas ini berasal dari Caniuse, yang mempunyai lebih terperinci. Nombor menunjukkan bahawa penyemak imbas menyokong ciri pada versi dan ke atas.
Desktop
| Chrome | Firefox | IE | Hujung | Safari |
|---|---|---|---|---|
| Tidak | 17 * | Tidak | Tidak | Tidak |
Mudah Alih / Tablet
| Android Chrome | Android Firefox | Android | Safari iOS |
|---|---|---|---|
| Tidak | 85 | Tidak | Tidak |
Maklumat lanjut
- Pemilih Tahap 4 Spesifikasi
- Isu Chromium # 576815
- Bug WebKit # 64861
- Dokumentasi Mozilla
- Permintaan Ciri Microsoft Edge
- Status Platform Chromium
- PostCSS
:dir()polyfill