Blog hướng dẫn, Học CSS
[Tự học CSS] – Tìm hiểu một số bộ chọn trong CSS
Chào các bạn, hôm nay chúng ta lại gặp nhau trong một loạt bài hướng dẫn dùng CSS cơ bản của Giuseart.com. Trong bài viết này mình sẽ giới thiệu các bạn thêm một số bộ chọn CSS, vì cũng khá nhiều bộ chọn nên mình cần các bạn chú ý khi theo dõi bài viết để tiếp thu một cách hiệu quả nhất có thể.
Bộ Chọn CSS [Thuộc Tính]
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ụ sau chọn tất cả các phần tử <a> có thuộc tính đích:
|
1 2 3 |
a[target] { background-color: yellow; } |
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 thuộc tính <a> các phần tử có thuộc tính target = "_ blank":
|
1 2 3 |
a[target="_blank"] { background-color: yellow; } |
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 có 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 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”:
|
1 2 3 |
[title~="flower"] { border: 5px solid yellow; } |
Ví dụ trên sẽ khớp với các phần tử có tiêu đề = “hoa”, tiêu đề = “hoa mùa hè” và tiêu đề = “hoa mới”, nhưng không phải tiêu đề = “hoa của tôi” hoặc tiêu đề = “hoa”.
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 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ị phải là toàn bộ từ, như class = “top” hoặc theo sau là dấu nối (-), như class = “top-text”!
Ví dụ
|
1 2 3 |
[class|="top"] { background: yellow; } |
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 bắt đầu 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 bắt đầu bằng “top”:
Lưu ý: Giá trị không phải là toàn bộ từ!
Ví dụ
|
1 2 3 |
[class^="top"] { background: yellow; } |
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 phải là toàn bộ từ!
Ví dụ
|
1 2 3 |
[class$="test"] { background: yellow; } |
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 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 phải là toàn bộ từ!
Ví dụ
|
1 2 3 |
[class*="te"] { background: yellow; } |
Biểu Mẫu Tạo Kiểu
Bộ chọn thuộc tính có thể hữu ích cho việc tạo kiểu biểu mẫu mà không có lớp hoặc ID:
Ví dụ
|
1 2 3 4 5 6 7 8 9 10 11 12 |
input[type="text"] { width: 150px; display: block; margin-bottom: 10px; background-color: yellow; } input[type="button"] { width: 120px; margin-left: 35px; display: block; } |
Lời Kết
Bài viết tới đây cũng đã kết thúc rồi, cảm ơn các bạn đã xem bài viết. Nếu có bất kỳ thắc mắc nào hãy bình luận phía dưới bài viết.
