Mẹo nhỏ: Để tìm kiếm chính xác các ấn phẩm của GiuseArt.com, hãy search trên Google với cú pháp: "Từ khóa" + "giuseart". (Ví dụ: thiệp tân linh mục giuseart). Tìm kiếm ngay
174 lượt xem

[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:

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":

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”:

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ụ

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ụ

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ụ

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ụ

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ụ

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.

[Tự học CSS] – Tìm hiểu một số bộ chọn trong CSS
5 (1) vote

Thông báo: GiuseArt đang xây dựng một website chia sẻ tài nguyên thiết kế đồ họa hoàn toàn miễn phí cho người Công Giáo, dự kiến ra mắt vào đầu năm 2019. Nếu bạn muốn, hãy tham gia cùng chúng tôi nhé! Tham gia ngay
Thẻ tìm kiếm:

Bài viết mới cập nhật:

Bình luận Facebook

Trả lời

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *