Bộ chọn thuộc tính CSS
Tạo kiểu cho các phần tử HTML với các thuộc tính cụ thể
Có thể tạo kiểu cho các phần tử HTML có các thuộc tính hoặc giá trị thuộc tính cụ thể.
Bộ chọn [thuộc tính] CSS
Bộ [attribute]chọn được sử dụng để chọn các phần tử có thuộc tính được chỉ định.
Ví dụ sau chọn tất cả <a> phần tử có thuộc tính đích:
Thí dụ
a[target] {
background-color: yellow;
}
Bộ chọn CSS [thuộc tính = "value"]
Bộ [attribute="value"]chọn được sử dụng để chọn các phần tử có thuộc tính và giá trị được chỉ định.
Ví dụ sau chọn tất cả <a> phần tử có thuộc tính target = "_ blank":
Thí dụ
a[target="_blank"] {
background-color: yellow;
}
Bộ chọn CSS [thuộc tính ~ = "value"]
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 một từ được chỉ định.
Ví dụ sau chọn tất cả các phần tử có thuộc tính title 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ẽ so khớp các phần tử với title = "flower", title = "hoa mùa hè" và title = "hoa mới", nhưng không khớp với title = "my-flower" hoặc title = "hoa".
Bộ chọn CSS [thuộc tính | = "value"]
Bộ [attribute|="value"]chọn được sử dụng để chọn các phần tử có thuộc tính được chỉ định, mà giá trị của nó có thể chính xác là giá trị được chỉ định hoặc giá trị được chỉ định theo sau bởi dấu gạch ngang (-).
Lưu ý: Giá trị phải là một từ toàn bộ, một mình, như class = "top" hoặc theo sau là dấu gạch ngang (-), như class = "top-text".
Thí dụ
[class|="top"] {
background: yellow;
}
Bộ chọn CSS [thuộc tính ^ = "value"]
Bộ [attribute^="value"]chọn được sử dụng để chọn các phần tử có thuộc tính được chỉ định, có giá trị bắt đầu bằng giá trị được chỉ định.
Ví dụ sau 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ừ nguyên vẹn!
Thí dụ
[class^="top"] {
background: yellow;
}
Bộ chọn CSS [thuộc tính $ = "value"]
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 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ừ nguyên vẹn!
Thí dụ
[class$="test"] {
background: yellow;
}
Bộ chọn CSS [thuộc tính * = "value"]
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 một giá trị được chỉ định.
Ví dụ sau 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ừ nguyên vẹn!
Thí dụ
[class*="te"] {
background: yellow;
}
Các hình thức 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 tạo kiểu không có 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;
}
Mẹo: Hãy truy cập Hướng dẫn về biểu mẫu CSS của chúng tôi để biết thêm ví dụ về cách tạo kiểu biểu mẫu bằng CSS.
Tất cả các bộ chọn thuộc tính CSS
| Selector | Example | Example description |
|---|---|---|
| [attribute] | [target] | Selects all elements with a target attribute |
| [attribute=value] | [target=_blank] | Selects all elements with target="_blank" |
| [attribute~=value] | [title~=flower] | Selects all elements with a title attribute containing the word "flower" |
| [attribute|=value] | [lang|=en] | Selects all elements with a lang attribute value starting with "en" |
| [attribute^=value] | a[href^="https"] | Selects every <a> element whose href attribute value begins with "https" |
| [attribute$=value] | a[href$=".pdf"] | Selects every <a> element whose href attribute value ends with ".pdf" |
| [attribute*=value] | a[href*="w3schools"] | Selects every <a> element whose href attribute value contains the substring "w3schools" |