Con cháu - Thủ thuật CSS

Một bộ chọn con trong CSS là bất kỳ bộ chọn nào có khoảng trắng giữa hai bộ chọn không có dấu tổ hợp. Dưới đây là một số ví dụ:

ul li ( ) header h2 ( ) footer a ( ) .module div ( ) #info-toggle span ( ) div dl dt a ( )

Lấy ul li ( )ví dụ. Nó có nghĩa là "bất kỳ mục danh sách nào là hậu duệ của danh sách không có thứ tự."

Descendant có nghĩa là bất kỳ nơi nào được lồng trong nó trong cây DOM. Có thể là con trực hệ, có thể là sâu năm tầng, nó vẫn là con cháu. Điều này khác với tổ hợp con (>) yêu cầu phần tử là cấp lồng nhau tiếp theo xuống.

Để minh họa, div span ( )sẽ khớp:

 I will match

I will match too

Bạn có thể không nên lo lắng về điều đó cho lắm, nhưng bộ chọn decedent khá “đắt” - có nghĩa là khó / chậm để các công cụ kết xuất tìm ra và thực hiện mọi thứ. MDN:

Bộ chọn con cháu là bộ chọn đắt nhất trong CSS. Nó đắt kinh khủng - đặc biệt nếu bộ chọn nằm trong Thẻ hoặc Danh mục chung.

Nhưng chỉ so với các bộ chọn khác. Nó vẫn nhanh chóng mặt và có thể bạn sẽ không bao giờ nhận ra nó trừ khi bạn phát điên.

Hỗ trợ trình duyệt

Trình duyệt Chrome	Safari	Firefox	Opera	I E	Android	iOS
Bất kì	Bất kì	Bất kì	Bất kì	Bất kì	Bất kì	Bất kì