:dir()Pseudo-klasy w CSS pozwala elementy, które zostaną wybrane na podstawie kierunku języka, jak określono w znacznikach HTML. W dokumencie istnieją naprawdę tylko dwa kierunki, w których język może płynąć, od lewej do prawej i od prawej do lewej. Potraktuj to jako sposób na stylizowanie elementów, które wyróżniają się różnymi kierunkami językowymi.
.item:dir(rtl) ( background: red; color: #fff; )Pseudoklasa przyjmuje tylko jedną wartość i zwróci wartość null, jeśli wprowadzona zostanie więcej niż jedna wartość.
Zobacz pseudo-selektor Pen: dir autorstwa Geoffa Grahama (@geoffgraham) na CodePen.
:dir(rtl) vs. (dir=rtl)
Możemy również wybrać element na podstawie jego kierunku językowego, używając selektora zapytania dopasowującego:
.item(dir=rtl) ( background: red; color: #fff; )To rzeczywiście działa, ale różni się od :dir(rtl)tego, że wybiera element tylko na podstawie tego, co jest ściśle zdefiniowane w kodzie HTML. Z drugiej strony, :dir(rtl)wyszuka preferencje językowe klienta użytkownika i wybierze element bez wyraźnego określenia w kodzie HTML.
To wielka sprawa, ponieważ elementy, które nie określają wyraźnie kierunku języka, odziedziczą diratrybut swojego najbliższego przodka, który go zawiera. Może to prowadzić do scenariusza, w którym użycie powoduje (dir=rtl)wybranie dodatkowych elementów niż zamierzasz.
Wsparcie przeglądarki
Te dane dotyczące obsługi przeglądarek pochodzą od Caniuse, który zawiera więcej szczegółów. Liczba wskazuje, że przeglądarka obsługuje tę funkcję w tej wersji i nowszych.
Pulpit
| Chrom | Firefox | TO ZNACZY | Brzeg | Safari |
|---|---|---|---|---|
| Nie | 17 * | Nie | Nie | Nie |
Telefon komórkowy / tablet
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| Nie | 85 | Nie | Nie |
Więcej informacji
- Specyfikacja selektorów poziomu 4
- Chromium, wydanie nr 576815
- Błąd WebKit # 64861
- Dokumentacja Mozilli
- Żądanie funkcji Microsoft Edge
- Stan platformy Chromium
- Wypełnienie
:dir()PostCSS