Bộ chọn thuộc tính CSS

Tìm hiểu cách sử dụng bộ chọn thuộc tính CSS

Trong bài đăng này, tôi sẽ giới thiệu các bộ chọn thuộc tính.

Cũng thấygiới thiệu về Bộ chọn CSS cơ bản. Trong đó, tôi giới thiệu một số bộ chọn CSS cơ bản: sử dụng bộ chọn kiểu, lớp, id, cách kết hợp chúng, cách nhắm mục tiêu nhiều lớp, cách định kiểu một số bộ chọn trong cùng một quy tắc, cách tuân theo phân cấp trang với con và trực tiếp bộ chọn con và anh chị em kế cận.

Bộ chọn hiện diện thuộc tính

Loại bộ chọn đầu tiên là bộ chọn hiện diện thuộc tính.

Chúng tôi có thể kiểm tra xem một phần tửcómột thuộc tính sử dụng[]cú pháp.p[id]sẽ chọn tất cảptrong trang cóidthuộc tính, bất kể giá trị của nó là bao nhiêu:

p[id] {
  /* ... */
}

Bộ chọn giá trị thuộc tính chính xác

Bên trong dấu ngoặc, bạn có thể kiểm tra giá trị thuộc tính bằng cách sử dụng=và CSS sẽ chỉ được áp dụng nếu thuộc tính khớp với giá trị chính xác được chỉ định:

p[id="my-id"] {
  /* ... */
}

Khớp một phần giá trị thuộc tính

Trong khi=hãy để chúng tôi kiểm tra giá trị chính xác, chúng tôi có các toán tử khác:

*=kiểm tra xem thuộc tính có chứa một phần
^=kiểm tra xem thuộc tính bắt đầu bằng phần
$=kiểm tra xem thuộc tính có kết thúc bằng phần
|=kiểm tra xem thuộc tính bắt đầu bằng một phần và theo sau là dấu gạch ngang (ví dụ: phổ biến trong các lớp) hay chỉ chứa một phần
~=kiểm tra xem một phần có được chứa trong thuộc tính hay không, nhưng được phân tách bằng dấu cách với phần còn lại

Tất cả các séc mà chúng tôi đã đề cập làtrường hợp nhạy cảm.

Nếu bạn thêm mộtingay trước dấu ngoặc đóng, séc sẽ không phân biệt chữ hoa chữ thường. Nó được hỗ trợ trong nhiều trình duyệt nhưng không phải tất cả, hãy kiểm trahttps://caniuse.com/#feat=css-case-insensitive.

Tải xuống miễn phí của tôiSổ tay CSS

Bộ chọn thuộc tính CSS

Tìm hiểu cách sử dụng bộ chọn thuộc tính CSS

Bộ chọn hiện diện thuộc tính

Bộ chọn giá trị thuộc tính chính xác

Khớp một phần giá trị thuộc tính

Các hướng dẫn css khác: