Cấu trúc của một tài liệu HTML tương tự như một cây gia đình. Trong gia đình của bạn, bạn có cha mẹ của bạn và những người khác đến trước bạn. Đây là tổ tiên của bạn. Trẻ em và những người đến sau khi bạn trên cây đó là hậu duệ của bạn. HTML hoạt động theo cách tương tự. Các yếu tố bên trong các yếu tố khác là hậu duệ của chúng. Ví dụ, vì gần như mọi phần tử HTML nằm bên trong các thẻ
, chúng sẽ là hậu duệ của các phần tử đó. Mối quan hệ này rất quan trọng để hiểu khi bạn bắt đầu làm việc với CSS và cần phải nhắm mục tiêu các yếu tố cụ thể để áp dụng các kiểu trực quan.Bộ chọn con cháu của CSS
Bộ chọn con cháu CSS áp dụng cho các phần tử nằm bên trong một phần tử khác (hoặc được khai báo chính xác hơn, một phần tử là hậu duệ của phần tử khác). Ví dụ, một danh sách không có thứ tự có một thẻ với các thẻ là hậu duệ. Hãy sử dụng HTML sau làm ví dụ:
- đây là liên kết li> ul>
Các thẻ LI là hậu duệ của thẻ UL. Thẻ A là hậu duệ của cả hai thẻ con LI (con cháu) và UL (cháu cháu). Nếu bạn nghĩ về điều này bằng cách sử dụng ví dụ cây gia đình,
- sẽ là cha mẹ,
- sẽ là con của phần tử đó, và sẽ là con của
- và là con của
- .
- ). Tất cả các liên kết khác trên trang không phải là hậu duệ của mục danh sách sẽ không nhận được kiểu này.
Vì vậy, làm thế nào bạn sẽ nhắm mục tiêu các yếu tố cụ thể trong một trang web bằng cách sử dụng các bộ chọn hậu duệ? Trước tiên, bạn phải xác định bộ chọn con cháu bằng cách sử dụng hai bộ chọn loại (hoặc nhiều hơn) được phân tách bằng dấu cách.
li a {text-decoration: none; }Trong ví dụ đó, các kiểu sẽ chỉ áp dụng cho một phần tử liên kết () là một phần tử con của phần tử danh sách (
Một điều quan trọng cần nhớ là không quan trọng có bao nhiêu thẻ nằm giữa các thẻ bạn có thể đang sử dụng trong bộ chọn con cháu của bạn. Nếu phần tử thứ hai được đặt trong bất kỳ vị trí nào trong phần tử đầu tiên, nó sẽ được chọn làm phần tử con.
Nếu bạn muốn chọn tất cả các neo được lấy từ các phần tử ul, bạn sẽ viết:
ul một {text-decoration: none; }Bây giờ, các kiểu này sẽ áp dụng cho bất kỳ liên kết nào là hậu duệ của một mục danh sách. Bạn cũng có thể viết bộ chọn này
ul li a {text-decoration: none; }Đây là bộ chọn con cháu sử dụng hơn hai bộ chọn loại. Trong trường hợp này, điều này sẽ áp dụng cho các liên kết bên trong danh sách mục và cũng nằm trong danh sách không có thứ tự.
Sử dụng Bộ chọn Lớp và Bộ chọn ID
Các bộ chọn mà bạn đang giảm dần từ không phải lúc nào cũng là kiểu con cháu. Ví dụ, hãy tưởng tượng bạn có một khu vực của trang web (như một bộ phận) với một thuộc tính ID của "biển quảng cáo". Bạn có thể thiết lập bộ chọn con cháu của ID đó:
#billboard ul {background-color: #ccc; }Điều này sẽ tạo kiểu cho danh sách không theo thứ tự là một hậu duệ của một phần tử có ID của "biển quảng cáo". Bạn có thể làm tương tự cho các giá trị lớp.
div.billboard ul {background-color: #ccc; }Điều này giả định rằng bộ phận có một giá trị lớp của "biển quảng cáo". CSS ở trên sẽ tạo kiểu cho phần tử
- bên trong bất kỳ bộ phận nào có giá trị lớp này.
Bạn có thể nhận được thực sự nặng tay và tiết với bộ chọn hậu duệ. Ví dụ, nếu bạn sử dụng Dreamweaver để viết mã HTML của mình, có một cài đặt khi bạn thêm các quy tắc CSS mới sẽ tự động tạo bộ chọn dựa trên vị trí con trỏ của bạn trên trang đó. Những gì Dreamweaver làm trong trường hợp này là tạo ra một bộ chọn con cháu dài dòng và dài dòng. Tính đặc thù đó không cần thiết cho CSS của bạn hoạt động. Những gì bạn muốn làm là tìm sự cân bằng giữa bộ chọn con cháu đủ cụ thể để bạn có thể xem chi tiết các yếu tố chính xác mà bạn cần (không có kiểu dáng bạn không muốn ảnh hưởng) mà không có quy tắc CSS có bộ chọn quá lớn.
- và là con của
- sẽ là con của phần tử đó, và sẽ là con của