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ể định kiểu các phần tử HTML có thuộc tính hoặc giá trị thuộc tính cụ thể.
Bộ chọn CSS [thuộc tính]
Bộ chọn [attribute]
được sử dụng để chọn các thành phần có thuộc tính được chỉ định.
Ví dụ sau chọn tất cả các phần tử <a> có thuộc tính đích:
Bộ chọn CSS [thuộc tính="giá trị"]
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ụ sau chọn tất cả các phần tử <a> có thuộc tính target="_blank":
Bộ chọn CSS [thuộc tính~="giá trị"]
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ụ 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":
Ví dụ trên sẽ khớp các phần tử với title="flower", title="summer hoa" và title="flower new", nhưng không khớp với title="my-flower" hoặc title="flowers".
Bộ chọn CSS [thuộc tính|="giá trị"]
Bộ chọn [attribute|="value"]
được sử dụng để chọn các phần tử có thuộc tính được chỉ định, có giá trị có thể chính xác là giá trị được chỉ định hoặc giá trị được chỉ định theo sau là dấu gạch ngang (-).
Lưu ý: Giá trị phải là cả một từ, một mình, như class="top" hoặc theo sau là dấu gạch nối( - ), như class="top-text".
Bộ chọn CSS [thuộc tính^="giá trị"]
Bộ chọn [attribute^="value"]
đượ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à cả một từ!
Bộ chọn CSS [thuộc tính$="giá trị"]
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ụ 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à cả một từ!
Bộ chọn CSS [thuộc tính*="giá trị"]
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ụ sau chọn tất cả các phần tử có giá trị thuộc tính lớp chứa "te":
Lưu ý: Giá trị không nhất thiết phải là cả một từ!
Hình thức tạo kiểu
Bộ chọn thuộc tính có thể hữu ích cho việc tạo kiểu cho các biểu mẫu không có lớp hoặc ID:
Ví dụ
input[type="text"]
{
width: 150px;
display: block;
margin-bottom: 10px;
background-color: yellow;
}
input[type="button"]
{
width: 120px;
margin-left: 35px;
display: block;
}
Hãy tự mình thử »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 cho 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 that contains a space-separated list of words, one of which is "flower" |
[ attribute |= value ] | [lang|="en"] | Selects all elements with a lang attribute value starting with "en" |
[ attribute ^= value ] | a[href^="https"] | Selects all <a> elements with a href attribute value starting with "https" |
[ attribute $= value ] | a[href$=".pdf"] | Selects all <a> elements with a href attribute value ending with ".pdf" |
[ attribute *= value ] | a[href*="w3schools"] | Selects all <a> elements with a href attribute value containing the substring "w3schools" |