Chọn器 thuộc tính CSS

Thiết lập phong cách cho các phần tử HTML có thuộc tính cụ thể

Chúng ta có thể thiết lập phong cách cho các phần tử HTML có thuộc tính hoặc giá trị thuộc tính cụ thể.

Chọn器 [attribute] CSS

[attribute] là bộ lọc để chọn các phần tử có thuộc tính cụ thể.

Ví dụ sau chọn tất cả các phần tử <a> có thuộc tính target;

Mô hình

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

Thử ngay

Bộ lọc CSS [attribute="value"]

[attribute="value"] là bộ lọc để chọn các phần tử có thuộc tính và giá trị cụ thể.

Ví dụ sau chọn tất cả các phần tử <a> có thuộc tính target="_blank":

Mô hình

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

Thử ngay

Bộ lọc CSS [attribute~="value"]

Bộ lọc [attribute~="value"] chọn các phần tử có giá trị thuộc tính chứa từ cụ thể.

Ví dụ sau chọn tất cả các phần tử có thuộc tính title chứa từ "flower":

Mô hình

[title~="flower"] {
  border: 5px solid yellow;
}

Thử ngay

Ví dụ trên sẽ khớp với các phần tử sau: title="flower", title="summer flower" và title="flower new", nhưng không khớp với: title="my-flower" hoặc title="flowers".

Bộ lọc CSS [attribute|="value"]

[attribute|="value"] là bộ lọc để chọn các phần tử có thuộc tính bắt đầu với giá trị cụ thể.

Ví dụ sau选取 có chứa class thuộc tính bắt đầu bằng "top":

Chú thích:Giá trị phải là một từ hoàn chỉnh hoặc từ đơn lẻ, ví dụ như class="top" hoặc theo sau dấu gạch chéo, ví dụ như class="top-text"。

Mô hình

[class|="top"] {
  background: yellow;
}

Thử ngay

Chọn器 CSS [attribute^="value"]

Chọn器 [attribute^="value"] sử dụng để选取 thuộc tính bắt đầu bằng giá trị cụ thể.

Ví dụ sau选取 có chứa class thuộc tính bắt đầu bằng "top":

Lưu ý:Giá trị không cần phải là từ nguyên hoàn chỉnh!

Mô hình

[class^="top"] {
  background: yellow;
}

Thử ngay

Chọn器 CSS [attribute$="value"]

Chọn器 [attribute$="value"] sử dụng để选取 thuộc tính kết thúc bằng giá trị cụ thể.

Ví dụ sau选取 có chứa class thuộc tính kết thúc bằng "test":

Lưu ý:Giá trị không cần phải là từ nguyên hoàn chỉnh!

Mô hình

[class$="test"] {
  background: yellow;
}

Thử ngay

Chọn器 CSS [attribute*="value"]

Chọn器 [attribute*="value"]选取 thuộc tính giá trị chứa từ khóa cụ thể.

Ví dụ sau选取 có chứa class thuộc tính "te":

Lưu ý:Giá trị không cần phải là từ nguyên hoàn chỉnh!

Mô hình

[class*="te"] {
  background: yellow;
}

Thử ngay

Thiết lập樣式 biểu mẫu

Nếu cần thiết lập樣式 cho biểu mẫu không có class hoặc id, chọn器 thuộc tính sẽ rất hữu ích:

Mô hình

input[type="text"] {
  width: 150px;
  display: block;
  margin-bottom: 10px;
  background-color: yellow;
}
input[type="button"] {
  width: 120px;
  margin-left: 35px;
  display: block;
}

Thử ngay

Lưu ý:Hãy truy cập vào trang web của chúng tôi Hướng dẫn CSS biểu mẫu，Học thêm về cách sử dụng CSS để thiết lập樣式 biểu mẫu.

Tất cả các loại chọn器 CSS

Chọn器 Ví dụ Mô tả ví dụ
[attribute] [target] Chọn tất cả các phần tử có thuộc tính target.
[attribute=value] [target=_blank] Chọn tất cả các phần tử có thuộc tính target="_blank".
[attribute~=value] [title~=flower] Chọn tất cả các phần tử có thuộc tính title chứa từ "flower".
[attribute|=value] [lang|=en] Chọn tất cả các phần tử có thuộc tính lang bắt đầu bằng "en".
[attribute^=value] a[href^="https"] Chọn mỗi phần tử <a> có giá trị thuộc tính href bắt đầu bằng "https".
[attribute$=value] a[href$=".pdf"] Chọn mỗi phần tử <a> có giá trị thuộc tính href kết thúc bằng ".pdf".
[attribute*=value] a[href*="codew3c"] Chọn mỗi phần tử <a> có giá trị thuộc tính href chứa chuỗi con "codew3c".

Đọc thêm

Sách ngoài giờ:Giải thích Chọn器 Thuộc tính CSS