Lớp :dir()giả trong CSS cho phép các phần tử được chọn dựa trên hướng của ngôn ngữ, như được xác định trong đánh dấu HTML. Thực sự chỉ có hai hướng ngôn ngữ có thể truyền trong một tài liệu, đó là từ trái sang phải và từ phải sang trái. Hãy coi đây là một cách để tạo kiểu cho các phần tử được phân biệt theo hướng ngôn ngữ khác nhau.
.item:dir(rtl) ( background: red; color: #fff; )Lớp giả chỉ chấp nhận một giá trị duy nhất và sẽ trả về giá trị rỗng nếu nhiều hơn một giá trị được nhập.
Xem công cụ chọn giả Pen: dir của Geoff Graham (@geoffgraham) trên CodePen.
:dir(rtl) vs. (dir=rtl)
Chúng tôi cũng có thể chọn một phần tử dựa trên hướng ngôn ngữ của nó bằng cách sử dụng bộ chọn truy vấn đối sánh:
.item(dir=rtl) ( background: red; color: #fff; )Điều đó thực sự hoạt động, nhưng khác :dir(rtl)ở chỗ nó chỉ chọn một phần tử theo những gì được xác định nghiêm ngặt trong đánh dấu HTML. Mặt khác, :dir(rtl)sẽ tìm ra tùy chọn ngôn ngữ của tác nhân người dùng và chọn phần tử mà không được nêu rõ ràng trong HTML.
Đây là một vấn đề lớn vì các phần tử không nói rõ hướng ngôn ngữ sẽ kế thừa dirthuộc tính của tổ tiên gần nhất của nó có chứa một thuộc tính. Điều đó có thể dẫn đến tình huống sử dụng (dir=rtl)các yếu tố bổ sung có chọn lọc hơn bạn dự định.
Hỗ trợ trình duyệt
Dữ liệu hỗ trợ trình duyệt này là từ Caniuse, có nhiều chi tiết hơn. Một con số cho biết rằng trình duyệt hỗ trợ tính năng ở phiên bản đó trở lên.
Máy tính để bàn
| Trình duyệt Chrome | Firefox | I E | Cạnh | Safari |
|---|---|---|---|---|
| Không | 17 * | Không | Không | Không |
Di động / Máy tính bảng
| Chrome dành cho Android | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| Không | 85 | Không | Không |
Thêm thông tin
- Thông số kỹ thuật cấp 4 của bộ chọn
- Sự cố Chromium # 576815
- Lỗi WebKit # 64861
- Tài liệu Mozilla
- Yêu cầu tính năng của Microsoft Edge
- Trạng thái nền tảng Chromium
- Polyfill
:dir()PostCSS