:dir()Pseudo klasė CSS leidžia elementai turi būti parinkta, priklausomai nuo kalbos kryptimi, kaip nustatyta HTML žymėjimo. Iš tikrųjų dokumente gali tekėti tik dvi kalbos kryptys, kurios yra iš kairės į dešinę ir iš dešinės į kairę. Pagalvokite apie tai, kaip stiliaus elementus, kuriuos išskiria skirtingas kalbos kryptingumas.
.item:dir(rtl) ( background: red; color: #fff; )Pseudo klasė priima tik vieną vertę ir grąžins nulį, jei įvesite daugiau nei vieną reikšmę.
Žr. „Pen: dir“ pseudo selektorių, kurį sukūrė Geoffas Grahamas (@geoffgraham) „CodePen“.
:dir(rtl) prieš (dir=rtl)
Taip pat galime pasirinkti elementą pagal jo kalbos kryptį naudodami atitikties užklausos parinkiklį:
.item(dir=rtl) ( background: red; color: #fff; )Tai tikrai veikia, bet skiriasi nuo to :dir(rtl), kad elementą parenka tik pagal tai, kas griežtai apibrėžta HTML žymėjime. Atvirkštinėje pusėje :dir(rtl)bus nušvinta vartotojo agento kalbos nuostatos ir parenkamas elementas, aiškiai nenurodytas HTML.
Tai yra didelis dalykas, nes elementai, kurie aiškiai nenurodo kalbos krypties, paveldės dirartimiausio protėvio atributą, kuriame jis yra. Tai gali sukelti scenarijų, kai naudojant (dir=rtl)pasirenkami papildomi elementai, nei ketinate.
Naršyklės palaikymas
Šie naršyklės palaikymo duomenys yra iš „Caniuse“, kuri turi daugiau informacijos. Skaičius rodo, kad naršyklė palaiko šios ir naujesnės versijos funkciją.
Darbalaukis
| „Chrome“ | „Firefox“ | T.Y | Briauna | „Safari“ |
|---|---|---|---|---|
| Ne | 17 * | Ne | Ne | Ne |
Mobilusis / planšetinis kompiuteris
| „Android Chrome“ | „Android Firefox“ | „Android“ | „iOS Safari“ |
|---|---|---|---|
| Ne | 85 | Ne | Ne |
Daugiau informacijos
- 4 lygio selektorių specifikacija
- „Chromium“ numeris # 576815
- „WebKit“ klaida # 64861
- „Mozilla“ dokumentacija
- „Microsoft Edge“ funkcijų užklausa
- „Chromium“ platformos būsena
- PostCSS
:dir()Polyfill