1. Bộ chọn [attribute] trong CSS

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

Ví dụ:

 

Ở đây, các liên kết có thuộc tính target có nền màu vàng

2. Bộ chọn [attribute = ‘’value’’] trong CSS

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

Ví dụ:

Ở đây, các liên kết có thuộc tính target=”_blank” có nền màu vàng

3. Bộ chọn [attribute ~= ‘’value’’] trong CSS

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

Ví dụ:

 

Ở đây, tất cả hình ảnh có thuộc tính title có chứa từ “mattrang” sẽ có viền màu vàng

4. Bộ chọn [attribute | = ‘’value’’] trong CSS

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

Ví dụ:

Ở đây, những phần tử có thuộc tính class có từ ‘’top’’ sẽ có màu nền là màu vàng

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

5. Bộ chọn [attribute^ = “value”]trong CSS

Bộ chọn [attribute^=”value”]đượ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ụ:

 

Ở đây, tất cả các phần tử có class bắt đầu từ từ “top” sẽ có n màu vàng

6. Bộ chọn [attribute $ = “value”]trong CSS

Bộ chọn [attribute$=”value”]đượ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ụ:

Ở đây, tất cả các phần tử có thuộc tính class kết thúc bằng từ “test” đều có màu nền là màu vàng

7. Bộ chọn [attribute *= “value”]trong CSS

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

Ví dụ:

Ở đây, tất cả các phần tử có thuộc tính class có chứa từ “te” đều có màu nền là màu vàng

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