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

Các thành phần HTML kiểu với các thuộc tính cụ thể


Có thể định kiểu các phần tử HTML có các thuộc tính hoặc giá trị thuộc tính cụ thể.

CSS [thuộc tính] Bộ chọn
Bộ [attribute]chọn được sử dụng để chọn các thành phần có thuộc tính được chỉ định.

Ví dụ sau đây chọn tất cả các phần tử <a> có thuộc tính đích:

Thí dụ
a[target] {
  background-color: yellow;
}

CSS [property = "value"] Bộ chọn
Bộ [attribute="value"]chọn được sử dụng để chọn các thành phần có thuộc tính và giá trị được chỉ định.

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

Thí dụ
a[target="_blank"] {
  background-color: yellow;
}

CSS [thuộc tính ~ = "value"] Bộ chọn
Bộ [attribute~="value"]chọn được sử dụng để chọn các thành phần có giá trị thuộc tính chứa một từ được chỉ định.

Ví dụ sau đây chọn tất cả các thành phần có thuộc tính tiêu đề chứa danh sách các từ được phân tách bằng dấu cách, một trong số đó là "hoa":

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

Ví dụ trên sẽ khớp các phần tử với title = "hoa", title = "hoa mùa hè" và title = "hoa mới", nhưng không phải title = "my-hoa" hoặc title = "hoa".

CSS [thuộc tính | = "value"] Bộ chọn
Bộ [attribute|="value"]chọn được sử dụng để chọn các thành phần có thuộc tính được chỉ định bắt đầu bằng giá trị được chỉ định.

Ví dụ sau đây chọn tất cả các phần tử có giá trị thuộc tính lớp bắt đầu bằng "top":

Lưu ý: Giá trị phải là toàn bộ một từ, như một mình, như class = "top" hoặc theo sau là dấu gạch nối (-), như class = "top-text"!

Thí dụ
[class|="top"] {
  background: yellow;
}

CSS [thuộc tính ^ = "value"] Bộ chọn
Bộ [attribute^="value"]chọn được sử dụng để chọn các phần tử có giá trị thuộc tính bắt đầu bằng một giá trị được chỉ định.

Ví dụ sau đây chọn tất cả các phần tử có giá trị thuộc tính lớp bắt đầu bằng "top":

Lưu ý: Giá trị không nhất thiết phải là một từ!

Thí dụ
[class^="top"] {
  background: yellow;
}

CSS [thuộc tính $ = "value"] Bộ chọn
Bộ [attribute$="value"]chọn được sử dụng để chọn các phần tử có giá trị thuộc tính kết thúc bằng một giá trị được chỉ định.

Ví dụ sau đây chọn tất cả các phần tử có giá trị thuộc tính lớp kết thúc bằng "test":

Lưu ý: Giá trị không nhất thiết phải là một từ! 

Thí dụ
[class$="test"] {
  background: yellow;
}

CSS [thuộc tính * = "value"] Bộ chọn
Bộ [attribute*="value"]chọn được sử dụng để chọn các phần tử có giá trị thuộc tính chứa giá trị được chỉ định.

Ví dụ sau đây chọn tất cả các phần tử có giá trị thuộc tính lớp có chứa "te":

Lưu ý: Giá trị không nhất thiết phải là một từ! 

Thí dụ
[class*="te"] {
  background: yellow;
}

Mẫu tạo kiểu
Các bộ chọn thuộc tính có thể hữu ích cho các biểu mẫu kiểu dáng mà không cần lớp hoặc ID:

Thí dụ
input[type="text"] {
  width: 150px;
  display: block;
  margin-bottom: 10px;
  background-color: yellow;
}

input[type="button"] {
  width: 120px;
  margin-left: 35px;
  display: block;
}