Thứ Tư , Tháng Hai 22 2017
Trang chủ / Chuyên đề lập trình / Lập trình Web / Kỹ thuật HTML-CSS / Các kết hợp trong CSS – Combinator

Các kết hợp trong CSS – Combinator

Các kết hợp trong CSS – Combinator

Việc sử dụng CSS kết hợp rất quan trọng trong việc thiết kế layout trong thiết kế weblập trình web. Sau đây tôi xin giới thiệu đến các bạn việc kết hợp này.

Có bốn loại combinator khác nhau trong CSS và từng loại mang lại lợi ích độc đáo của riêng:

  • Descendant Selector- Selector con cháu
  • Child Selector – Selector con
  • Sibling Selector – Selector anh chị em ruột liền kề
  • Sibling Selector Tổng quát

Descendant Selector

Descendant Selector bao gồm 2 hay nhiều selector phía sau nó, cách nhau bởi khoảng trắng. Trong ví dụ này, nếu chúng ta muốn áp dụng style cho các thẻ <p> bên trong thẻ <div class="facts"> có class là “facts” chúng ta có thể viết như sau:

dom-tree-descendant-selector

Child Selector

Child Selector có một chút khác biệt so với Descendant Selector. Khác biệt đầu tiên là chúng ta sẽ sử dụng dấu “>” giữa 2 Selector với nhau để truy xuất xuống các con bên dưới. Việc sử dụng cách này chỉ khi nào chúng ta cần áp dụng cho những thẻ con ngay sau thẻ cha một mức.

Các bạn xem hình dưới đây:

dom-tree-child-selector

 

Theo như phần tôi mô tả ở trên và dựa vào hình, chúng ta muốn áp dụng CSS cho 2 thẻ p liền kề thẻ cha div ở trên.

Adjecent Sibling Selector

Adjecent Sibling Selector sẽ áp dụng đối với thẻ nằm ngay sau một thẻ ở cùng một cấp trong kiến trúc cây DOM.  Chúng ta sẽ sử dụng dấu cộng (+) giữa Selector đầu tiên và Selector thứ 2. Các bạn xem hình dưới đây:

dom-tree-adjacent-sibling-selector

Code trong CSS sẽ như sau:

Như trong hình vẽ, thẻ p ngay sau thẻ h1 sẽ được áp dụng.

General Sibling Selector

General Sibling Selector sẽ áp dụng cho các thẻ liền kề, nhưng không giống như Adjacent Sibling Selector ở trên, nó áp dụng cho tất cả các thẻ liền kề sau thẻ ban đầu chứ không phải duy nhất một thẻ kế cạnh. Nó sử dụng kí hiệu (~) giữa 2 Selector. Các bạn xem hình vẽ bên dưới:

dom-tree-general-sibling-selector

Như trên hình vẽ, các bạn sẽ thấy nó áp dụng cho cả 2 thẻ p sau thẻ h1.

Kết luận

CSS Combinator giúp giảm thiểu tối đa các khai báo class và ID trong CSS. Nó cũng tốt cho các trình duyệt của chúng ta.

Các bạn có thể xem thêm các bài học chi tiết tại khóa học miễn phí này.

Nhận xét của bạn

nhận xét

Tác giả songle

songle

Xem thêm

11924792_978479352173525_1985422716_n-310x180

Lập trình ASP.NET MVC5 toàn tập qua dự án Web bán hàng

Bạn đã nắm vững các kiến thức lập trình đối tượng (ngôn ngữ C# ), ...

Trả lời