Tôi đã tìm thấy bộ chọn CSS sau trong biểu định kiểu tác nhân người dùng Google Chrome:

[type="checkbox" i]

Nghĩa ilà gì?

Như đã đề cập trong các nhận xét, nó dành cho đối sánh thuộc tính không phân biệt chữ hoa chữ thường. Đây là một tính năng mới trong CSS Selectors Level 4.

Hiện tại, nó có sẵn trong Chrome 49+, Firefox 47+, Safari 9+ và Opera 37 + *. Trước đó, nó chỉ có sẵn trong các kiểu tác nhân người dùng Chrome bắt đầu từ Chrome 39, nhưng có thể được bật cho nội dung web bằng cách đặt cờ các tính năng thử nghiệm.

* Các phiên bản trước của Opera cũng có thể hỗ trợ nó.

Ví dụ làm việc / Kiểm tra trình duyệt:

[data-test] {
    width: 100px;
    height: 100px;
    margin: 4px;
}

[data-test="A"] {
    background: red;
}

[data-test="a" i] {
    background: green;
}

Green if supported, red if not:

<div data-test="A"></div>

Hình vuông bên trên sẽ có màu xanh nếu trình duyệt hỗ trợ tính năng này, màu đỏ nếu không.

Đó là cờ phân biệt chữ hoa chữ thường cho các bộ chọn thuộc tính, được giới thiệu trong Bộ chọn 4 . Rõ ràng là họ đã lén triển khai tính năng này vào Chrome vào đầu tháng 8 năm 2014.

Tóm lại: cờ này yêu cầu trình duyệt khớp các giá trị tương ứng cho typethuộc tính không phân biệt chữ hoa chữ thường. Bộ chọn mặc định phù hợp với hành vi cho các giá trị thuộc tính trong HTML là trường hợp nhạy cảm , mà thường là không mong muốn vì nhiều thuộc tính được định nghĩa có giá trị case-insensitive, và bạn muốn chắc chắn chọn chọn của bạn lên tất cả các yếu tố đúng bất kể trường hợp. typelà một ví dụ về một thuộc tính như vậy, vì nó là một thuộc tính liệt kê và các thuộc tính được liệt kê được cho là có giá trị không phân biệt chữ hoa chữ thường .

Dưới đây là các cam kết có liên quan:

• 179370 - thực hiện
• 179401 - thay đổi đối với bảng định kiểu UA như được hiển thị trong ảnh chụp màn hình trong câu hỏi

Lưu ý rằng nó hiện bị ẩn trong cờ "Bật tính năng Nền tảng web thử nghiệm", bạn có thể truy cập cờ này tại chrome: // flags / # enable-testing-web-platform-features. Điều này có thể giải thích tại sao tính năng này hầu như không được chú ý - các tính năng ẩn đằng sau cờ đó chỉ có thể được sử dụng trong nội bộ và không được sử dụng trong mã hiển thị công khai (chẳng hạn như bảng định kiểu tác giả) trừ khi nó được bật, vì chúng đang thử nghiệm và do đó chưa sẵn sàng để sử dụng sản xuất.

Đây là một trường hợp kiểm tra mà bạn có thể sử dụng - so sánh kết quả khi cờ được bật và tắt:

span[data-foo="bar"] {
    color: red;
}

span[data-foo="bar" i] {
    color: green;
}

<span data-foo="bar">If all of this text is green,</span>
<span data-foo="Bar">your browser supports case-insensitive attribute selectors.</span>

Lưu ý rằng tôi sử dụng thuộc tính dữ liệu tùy chỉnh thay vì typeđể cho thấy rằng nó có thể được sử dụng với bất kỳ thuộc tính nào.

Tôi không biết về bất kỳ triển khai nào khác kể từ khi viết bài này, nhưng hy vọng các trình duyệt khác sẽ sớm bắt kịp. Đây là một bổ sung tương đối đơn giản nhưng cực kỳ hữu ích cho tiêu chuẩn và tôi mong muốn có thể sử dụng nó trong tương lai.