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

Lựa chọn các phần tử dựa trên các thuộc tính và giá trị thuộc tính của chúng là rất mạnh mẽ.

Điều này kiểm tra sự hiện diện của một thuộc tính:

a[title] {
  background-color: yellow;
}

Và điều này sẽ kiểm tra một thuộc tính có giá trị cụ thể:

a[target="_blank"] {
  background-color: hotpink;
}

Nhưng xin chờ chút nữa!

Bạn có thể làm nhiều hơn thế nữa:

[thuộc tính ~ = “foo”]: Kiểm tra xem giá trị có chứa từ foo hay không.
[thuộc tính | = “foo”]: Kiểm tra xem giá trị có bắt đầu bằng từ foo hay không.
[thuộc tính ^ = “foo”]: Kiểm tra xem giá trị có bắt đầu bằng các chữ cái foo hay không.
[thuộc tính $ = “foo”]: Kiểm tra xem giá trị có kết thúc bằng foo hay không.
[thuộc tính * = “foo”]: Kiểm tra xem giá trị có chứa các chữ cái foo hay không.

Tags:

Các tin liên quan