btvn.vn
Tìm kiếm Đăng nhập

Bộ chọn anh em liền kề và đứng sau

Lưu trên thiết bị này
Màu sắc và quan hệ bộ chọn CSS · Chọn bài khác

Cùng cha và đứng sau

E + F chọn F khi F là phần tử liền sau E và cả hai cùng cha. E ~ F chọn những F đứng sau E, cùng cha, có thể có phần tử khác xen giữa. Cả hai đều nhắm tới F, không chọn E hoặc F đứng trước E. Liền kề ở đây xét **phần tử**. Đoạn chữ thường, khoảng trắng và chú thích HTML giữa E và F không làm mất quan hệ +. Một phần tử span xen giữa thì có thể làm mất quan hệ ấy. Việc màn hình tự ngắt dòng không thay đổi quan hệ trong cây HTML.

Theo dõi từng strong

```html <p> <strong>Trước</strong> <em>Mốc</em> có một đoạn chữ <!-- Chú thích không phải phần tử --> <strong>A</strong> <span>Ngăn</span> <strong>B</strong> <span><strong>C</strong></span> </p> ``` Các strong Trước, A và B có cha p; strong C có cha span. Với em + strong, chỉ A khớp vì A là phần tử ngay sau em. Chữ “có một đoạn chữ” và chú thích ở giữa không phải phần tử. Với em ~ strong, A và B khớp. Trước không khớp vì đứng trước em; C không khớp vì khác cha. Nếu đổi quy tắc màu đỏ từ ~ sang + thì A vẫn đỏ, còn B không được quy tắc ấy tô đỏ nữa.

Kiểm cả phần tử thứ hai

Mở hai tệp mẫu và so sánh A với B. Tệp liền kề dùng em + strong { color: red; }; tệp đứng sau dùng em ~ strong { color: red; }. Trong hai tệp không có quy tắc màu khác: A và B đều đỏ ở mẫu ~; chỉ A đỏ ở mẫu +, còn B dùng màu mặc định. Chỉ nhìn A sẽ bỏ sót sự thay đổi ở B.

Bài luyện

Trong mẫu trên, em + strong chọn strong nào?
Chọn một đáp án

Bài luyện

Trong cùng mẫu, em ~ strong chọn những strong nào?
Chọn một đáp án

Bài luyện

Chèn một span mới vào giữa em và strong A trong mã, điều gì đúng?
Chọn một đáp án

Bài luyện

Với hai tệp mẫu chỉ khác em ~ strong màu đỏ và em + strong màu đỏ, khi đổi ~ thành + thì sao?
Chọn một đáp án

Đang học