Bộ chọn thuộc tính trong CSS - CSS Attribute Selectors

  • Thanh Vo

    Tác giả

    Thanh Vo

  • Ngày đăng

    8 thg 11, 2022

  • Số lượt xem

    438 lượt xem


Có thể tạo kiểu cho các phần tử HTML có các attribute hoặc giá trị attribute cụ thể.

CSS [attribute] Selector

[attribute] selector được sử dụng để chọn các element có attribute được chỉ định.

Ví dụ sau chọn tất cả element <a> có target attribute:

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

 

CSS [attribute="value"] Selector

[attribute="value"] selector được sử dụng để chọn các element có attribute và giá trị được chỉ định.

Ví dụ sau chọn tất cả element <a> có attribute target = "_ blank":

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

 

CSS [attribute~="value"] Selector

[attribute~="value"] selector được sử dụng để chọn các element có giá trị attribute chứa một từ được chỉ định.

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

 

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

CSS [attribute|="value"] Selector

[attribute|="value"] selector được sử dụng để chọn các element có attribute đượ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ừ nguyên vẹn, như class = "top" hoặc theo sau là dấu gạch ngang (-), như class = "top-text".

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

 

CSS [attribute^="value"] Selector

[attribute^="value"] selector được sử dụng để chọn các element có attribute đượ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 element có giá trị attribute class 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!

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

 

CSS [attribute$="value"] Selector

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

Ví dụ sau chọn tất cả các element có giá trị attribute class 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!

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

 

CSS [attribute*="value"] Selector

[attribute*="value"] selector được sử dụng để chọn các element có giá trị attribute chứa một giá trị được chỉ định.

Ví dụ sau chọn tất cả các element có giá trị attribute class có chứa "te":

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

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

 

Styling Forms

Các attribute selector có thể hữu ích cho việc tạo kiểu cho các form không có class hoặc id:

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


Tổng số đánh giá: 0

Xếp hạng: 5 / 5 sao

Danh sách bài học về CSS

Liên Kết Chia Sẻ

Đây là liên kết chia sẻ bới cộng đồng người dùng, chúng tôi không chịu trách nhiệm gì về nội dung của các thông tin này. Nếu có liên kết nào không phù hợp xin hãy báo cho admin.