:dir()Pseido-klases CSS ļauj elementi jāizvēlas, balstoties uz virzienu valodas, kā noteikts HTML atzīmes. Dokumentā tiešām var plūst tikai divas virzienu valodas: no kreisās puses uz labo un no labās puses uz kreiso. Padomājiet par to kā par stila elementu stilu, kas atšķiras ar atšķirīgu valodas virzienu.
.item:dir(rtl) ( background: red; color: #fff; )Pseidoklase pieņem tikai vienu vērtību un atgriezīs nulli, ja tiks ievadīta vairāk nekā viena vērtība.
Skatiet Geoff Graham (@geoffgraham) penso selektoru vietnē PenPod.
:dir(rtl) vs. (dir=rtl)
Varam arī atlasīt elementu, pamatojoties uz tā valodas virzienu, izmantojot atbilstības vaicājuma atlasītāju:
.item(dir=rtl) ( background: red; color: #fff; )Tas patiešām darbojas, bet atšķiras no tā :dir(rtl), ka elementu izvēlas tikai pēc tā, kas ir stingri noteikts HTML iezīmējumā. No otras puses :dir(rtl)būs izspiest lietotāja aģenta valodas preferences un atlasīt elementu, nepārprotami nenorādot HTML.
Tas ir liels darījums, jo elementi, kas skaidri nenorāda valodas virzienu, mantos dirtā tuvākā priekšteča atribūtu, kas to satur. Tas var novest pie scenārija, kurā, izmantojot, tiek (dir=rtl)izvēlēti papildu elementi, nekā plānojat.
Pārlūka atbalsts
Šie pārlūka atbalsta dati ir no Caniuse, kurai ir sīkāka informācija. Cipars norāda, ka pārlūks atbalsta šo un jaunākās versijas funkciju.
Darbvirsma
| Chrome | Firefox | IE | Mala | Safari |
|---|---|---|---|---|
| Nē | 17 * | Nē | Nē | Nē |
Mobilais / planšetdators
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| Nē | 85 | Nē | Nē |
Vairāk informācijas
- Selektoru 4. līmeņa specifikācija
- Hroma izdevums # 576815
- WebKit kļūda # 64861
- Mozilla dokumentācija
- Microsoft Edge funkciju pieprasījums
- Hroma platformas statuss
- PostCSS
:dir()Polyfill