Có rất nhiều cách để bạn có thể chọn các phần tử trong CSS. Lựa chọn cơ bản nhất là theo tên thẻ, như p ( ). Hầu hết mọi thứ cụ thể hơn một công cụ chọn thẻ đều sử dụng các thuộc tính - classvà IDcả hai đều chọn các thuộc tính đó trên các phần tử HTML. Nhưng classvà IDkhông phải là thuộc tính duy nhất mà nhà phát triển có thể chọn. Chúng ta có thể sử dụng bất kỳ thuộc tính nào của phần tử làm bộ chọn.
Lựa chọn thuộc tính có một cú pháp đặc biệt. Đây là một ví dụ:
a(href="https://css-tricks.com") ( color: #E18728; )Đó là công cụ chọn đối sánh chính xác sẽ chỉ chọn các liên kết có hrefgiá trị thuộc tính chính xác là “https://css-tricks.com”.
Bảy loại khác nhau
Bộ chọn thuộc tính có phân biệt chữ hoa chữ thường theo mặc định (xem kết hợp phân biệt chữ hoa chữ thường bên dưới) và được viết bên trong dấu ngoặc ().
Có bảy loại đối sánh khác nhau mà bạn có thể tìm thấy bằng công cụ chọn thuộc tính và cú pháp của mỗi loại là khác nhau. Mỗi bộ chọn thuộc tính phức tạp hơn đều xây dựng dựa trên cú pháp của bộ chọn đối sánh chính xác - tất cả chúng đều bắt đầu bằng tên thuộc tính và kết thúc bằng dấu bằng theo sau là (các) giá trị thuộc tính, thường được đặt trong dấu ngoặc kép. Điều nằm giữa tên thuộc tính và dấu bằng là thứ tạo nên sự khác biệt giữa các bộ chọn.
(data-value) ( /* Attribute exists */ ) (data-value="foo") ( /* Attribute has this exact value */ ) (data-value*="foo") ( /* Attribute value contains this value somewhere in it */ ) (data-value~="foo") ( /* Attribute has this value in a space-separated list somewhere */ ) (data-value^="foo") ( /* Attribute value starts with this */ ) (data-value|="foo") ( /* Attribute value starts with this in a dash-separated list */ ) (data-value$="foo") ( /* Attribute value ends with this */ )Giá trị chứa: giá trị thuộc tính chứa một thuật ngữ làm giá trị duy nhất, một giá trị trong danh sách giá trị hoặc là một phần của giá trị khác. Để sử dụng bộ chọn này, hãy thêm dấu hoa thị (*) trước dấu bằng. Ví dụ: img(alt*="art")sẽ chọn hình ảnh có văn bản thay thế “nghệ thuật trừu tượng” và “vận động viên bắt đầu một môn thể thao mới”, vì giá trị “nghệ thuật” nằm trong từ “bắt đầu”.
Giá trị nằm trong danh sách được phân tách bằng dấu cách: giá trị là giá trị thuộc tính duy nhất hoặc là toàn bộ giá trị trong tập hợp giá trị được phân tách bằng dấu cách. Không giống như bộ chọn “chứa”, bộ chọn này sẽ không tìm kiếm giá trị dưới dạng một đoạn từ. Để sử dụng bộ chọn này, hãy thêm dấu ngã (~) trước dấu bằng. Ví dụ: img(alt~="art")sẽ chọn hình ảnh có văn bản thay thế “nghệ thuật trừu tượng” và “chương trình nghệ thuật”, nhưng không chọn “vận động viên bắt đầu một môn thể thao mới” (mà bộ chọn “chứa” sẽ chọn).
Giá trị bắt đầu bằng: giá trị thuộc tính bắt đầu bằng thuật ngữ đã chọn. Để sử dụng bộ chọn này, hãy thêm dấu mũ (^) trước dấu bằng. Đừng quên, vấn đề phân biệt chữ hoa chữ thường. Ví dụ: img (alt = ”art”) sẽ chọn hình ảnh có văn bản thay thế “chương trình nghệ thuật” và “mẫu nghệ thuật”, nhưng không chọn hình ảnh có văn bản thay thế “Arthur Miller” vì “Arthur” bắt đầu bằng chữ hoa .
Giá trị đầu tiên nằm trong danh sách được phân tách bằng dấu gạch ngang: Bộ chọn này rất giống với bộ chọn “bắt đầu với”. Tại đây, bộ chọn khớp với giá trị là giá trị duy nhất hoặc là giá trị đầu tiên trong danh sách giá trị được phân tách bằng dấu gạch ngang. Để sử dụng bộ chọn này, hãy thêm một ký tự ống (|) trước dấu bằng. Ví dụ: li(data-years|="1900")sẽ chọn các mục danh sách có data-yearsgiá trị “1900-2000”, nhưng không chọn mục danh sách có data-yearsgiá trị “1800-1900”.
Giá trị kết thúc bằng: giá trị thuộc tính kết thúc bằng thuật ngữ đã chọn. Để sử dụng bộ chọn này, hãy thêm dấu đô la ($) trước dấu bằng. Ví dụ: a(href$="pdf")chọn mọi liên kết kết thúc bằng .pdf.
Lưu ý về dấu ngoặc kép: Bạn có thể không có dấu ngoặc kép xung quanh giá trị trong một số trường hợp, nhưng các quy tắc để chọn không có dấu ngoặc kép là không nhất quán giữa các trình duyệt. Báo giá luôn hoạt động, vì vậy nếu bạn tiếp tục sử dụng chúng, bạn có thể chắc chắn rằng bộ chọn của mình sẽ hoạt động.
Xem Bộ chọn thuộc tính bút bằng CSS-Tricks (@ css-trick) trên CodePen.
Thực tế thú vị: các giá trị được coi là chuỗi, vì vậy bạn không phải thực hiện bất kỳ cách thoát ký tự cầu kỳ nào để làm cho chúng khớp với nhau, như cách bạn làm nếu bạn sử dụng các ký tự bất thường trong bộ chọn lớp hoặc ID.
(class="(╯°□°）╯︵ ┻━┻")( color: red; font-weight: bold; )Đối sánh không phân biệt chữ hoa chữ thường
Bộ chọn thuộc tính không phân biệt chữ hoa chữ thường là một phần của thông số kỹ thuật Cấp 4 của Nhóm công tác CSS. Như đã đề cập ở trên, các chuỗi giá trị thuộc tính theo mặc định có phân biệt chữ hoa chữ thường, nhưng có thể được thay đổi thành phân biệt chữ hoa chữ thường bằng cách thêm ingay trước dấu ngoặc đóng:
(attribute="value" i) ( /* Styles here will apply to elements with: attribute="value" attribute="VaLuE" attribute="VALUE"… etc */ )Đối sánh không phân biệt chữ hoa chữ thường có thể thực sự hữu ích cho việc nhắm mục tiêu các thuộc tính chứa văn bản không thể đoán trước, do con người viết. Ví dụ: giả sử bạn đang tạo hình bong bóng thoại trên ứng dụng trò chuyện và muốn thêm "vẫy tay" vào bất kỳ tin nhắn nào có nội dung "xin chào" ở một số dạng. Bạn có thể làm như vậy chỉ với CSS, sử dụng trình đối sánh không phân biệt chữ hoa chữ thường để bắt tất cả các biến thể có thể có:
Xem đối sánh thuộc tính CSS không phân biệt chữ hoa chữ thường của bút bằng CSS-Tricks (@ css-trick) trên CodePen.
Kết hợp chúng
Bạn có thể kết hợp bộ chọn thuộc tính với các bộ chọn khác, như thẻ, lớp hoặc ID.
div(attribute="value") ( /* style rules here */ ) .module(attribute="value") ( /* style rules here */ ) #header(attribute="value") ( /* style rules here */ )Hoặc thậm chí kết hợp nhiều bộ chọn thuộc tính. Ví dụ này sẽ chọn hình ảnh với văn bản thay thế bao gồm từ “người” làm giá trị duy nhất hay một giá trị trong một không gian danh sách tách ra, và một srcgiá trị bao gồm giá trị “lorem”:
img(alt~="person")(src*="lorem") ( /* style rules here */ )Xem Các thuộc tính kết hợp bút và Lựa chọn chỉ thuộc tính bằng CSS-Tricks (@ css-trick) trên CodePen.
Bộ chọn thuộc tính trong JavaScript và jQuery
Bộ chọn thuộc tính có thể được sử dụng trong jQuery giống như bất kỳ bộ chọn CSS nào khác. Trong JavaScript, bạn có thể sử dụng bộ chọn thuộc tính với document.querySelector()và document.querySelectorAll().
Xem Bộ chọn thuộc tính bút trong JS và jQuery bằng CSS-Tricks (@ css-trick) trên CodePen.
Có liên quan
- lớp học
- TÔI
Thêm thông tin
- Bộ chọn thuộc tính gầy trên
- Bộ chọn thuộc tính tại MDN
- Bộ chọn thuộc tính trong thông số CSS W3C
Hỗ trợ trình duyệt
| Trình duyệt Chrome | Safari | Firefox | Opera | I E | Android | iOS |
|---|---|---|---|---|---|---|
| Bất kì | Bất kì | Bất kì | Bất kì | 7+ | Bất kì | Bất kì |