Tôi không có tài năng gì cả. Tôi chỉ đam mê hiểu biết
Tìm Hiểu Về CSS Selector

Tìm Hiểu Về CSS Selector


Ngày 17 Tháng 8 Năm 2021

Xin chào các bạn quay lại blog của mình. Trong bài hôm nay chúng ta sẽ đi vào tìm hiểu CSS Selector là gì và cách áp dụng nó vào trong việc xây dựng và thiết kế website nha.

CSS Selector Là Gì?

CSS Selector là cách thức mà chúng ta thiết lập style cho các thành phần ở trong trang HTML.

CSS Selector

Universal selectors

Thuộc tính này sẽ giúp bạn chọn thiết lập style cho tất cả thành phần ở trong website.

Universal selectors

Bây giờ chúng ta sẽ đi vào ví dụ để tìm hiểu cách áp dụng nó vào trong website nhé!

See the Pen Universal selectors by haycuoilennao19 (@haycuoilennao19) on CodePen.

Element Selector

Element Selector sẽ giúp chúng ta chọn các phần tử trong website theo tên của thẻ HTML.

Element Selector

Bạn hãy xem ví dụ dưới đây để hình dung dễ hơn nhé!

See the Pen element selector by haycuoilennao19 (@haycuoilennao19) on CodePen.

List Selector

List Selector giúp bạn có thể kết hợp nhiều selector có cùng một thuộc tính lại với nhau.

List Selector

Ví dụ về list selector ở bên dưới nha.

See the Pen list selector by haycuoilennao19 (@haycuoilennao19) on CodePen.

ID Selector

Thuộc tính này sẽ thiết lập style cho thành phần trong trang HTML dựa trên thuộc tính id. Một điểm bạn cần lưu ý là trong một trang web thì tên id cho từng element thì phải khác nhau hoặc bạn có thể hiểu là không được sử dụng một tên id cho nhiều thành phần trong website.

ID Selector

Còn bây giờ chúng ta sẽ đi vào ví dụ cụ thể về id selector nhé!

See the Pen id selector by haycuoilennao19 (@haycuoilennao19) on CodePen.

Class Selector

Thuộc tính này khá tương đồng với id selector. Điểm khác biệt chính của nó là có thể áp dụng cho nhiều thành phần ở trong trang web. Class Selector được sử dụng rất phổ biến trong CSS.

Class Selector

Bây giờ chúng ta sẽ đi vào tìm hiểu ví dụ thực tế ở dưới đây nha!

See the Pen class selector by haycuoilennao19 (@haycuoilennao19) on CodePen.

Descendant Selector

Descendant Selector giúp chúng ta có thể kết hợp các selector lại với nhau tuy nhiên điểm khác biệt chính của nó là selector thứ hai sẽ là con của selector thứ nhất.

Descendant Selector

Để hiểu rõ hơn thì chúng ta hãy cùng nhau xem ví dụ dưới đây nhé!

See the Pen Descendant Selector by haycuoilennao19 (@haycuoilennao19) on CodePen.

Attribute selectors

Thuộc tính này sẽ giúp chúng ta có thể lựa chọn đối tượng trong website dựa trên attribute (thuộc tính) của nó.

Attribute Selector

Để hiểu rõ hơn chúng ta hãy đi vào tìm hiểu ví dụ sau đây nhé!

See the Pen attribute selector by haycuoilennao19 (@haycuoilennao19) on CodePen.

Tổng kết:

Qua đây mình mong bài viết sẽ cung cấp thêm cho bạn kiến thức hữu ích về cách áp dụng selector vào trong CSS cho việc phát triển, thiết kế web và nếu có thắc mắc gì cứ gửi email mình sẽ phản hồi sớm nhất có thể. Rất mong bạn tiếp tục ủng hộ trang web để mình có thể viết nhiều bài hay hơn nữa nhé. Chúc bạn có một ngày vui vẻ!

Tìm Kiếm Bài Viết

Ads Digital Ocean

Nhận Ngay $100 sử dụng dịch vụ khi đăng ký tài khoản trên DigitalOcean.

Ads azdigi

Sử dụng dịch vụ hosting của Azdigi chỉ với 50.000 đồng.

Ads HostGator

Nhận Ngay Tên Miền Và Chứng Chỉ SSL Miễn Phí Khi Sử Dụng Hosting Của HostGator.

Ads Name Cheap

Đăng Ký Tên Miền Chỉ Với $0.99/năm cùng với Name Cheap.