Tìm Hiểu Về CSS Selector

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à phương pháp mà tất cả chúng ta thiết lập style cho những thành phần ở trong trang HTML .CSS Selector

Universal selectors

Bạn đang đọc: Tìm Hiểu Về CSS Selector

Thuộc tính này sẽ giúp bạn chọn thiết lập style cho toàn bộ thành phần ở trong website. Universal selectorsBây giờ tất cả chúng ta sẽ đi vào ví dụ để tìm hiểu và khám phá cách vận 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 tất cả chúng ta chọn những thành phần trong website theo tên của thẻ HTML .Element SelectorBạn hãy xem ví dụ dưới đây để tưởng tượng dễ hơn nhé !See the Pen element selector by haycuoilennao19 ( @ haycuoilennao19 ) on CodePen .

List Selector

List Selector giúp bạn hoàn toàn có thể phối hợp nhiều selector có cùng một thuộc tính lại với nhau. List SelectorVí 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 SelectorCòn giờ đây tất cả chúng ta sẽ đi vào ví dụ đơn cử 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 độc lạ chính của nó là hoàn toàn có thể vận dụng cho nhiều thành phần ở trong website. Class Selector được sử dụng rất thông dụng trong CSS. Class SelectorBây giờ tất cả chúng ta sẽ đi vào khám phá ví dụ thực tiễn ở 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ì tất cả 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 tất cả chúng ta hãy đi vào tìm hiểu và khám phá 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 ứng thêm cho bạn kiến thức và kỹ năng hữu dụng về cách vận dụng selector vào trong CSS cho việc tăng trưởng, phong cách thiết kế web và nếu có vướng mắc gì cứ gửi email mình sẽ phản hồi sớm nhất hoàn toàn có thể. Rất mong bạn liên tục ủng hộ website để mình hoàn toàn có thể viết nhiều bài hay hơn nữa nhé. Chúc bạn có một ngày vui tươi !