Mỗi dấu nối thêm một điều kiện
Phần vận dụng mở rộng từ bốn quan hệ đã học. Đọc phần tử cuối rồi kiểm từng quan hệ với những phần tử phía trước.
| Dạng chuỗi | Điều kiện để chọn phần tử cuối |
|---|---|
| E1 E2 E3 |E3 nằm trong E2; E2 nằm trong E1, có thể qua cấp trung gian|
| E1 > E2 > E3 |E3 là con trực tiếp của E2; E2 là con trực tiếp của E1|
| E + F + G |E, F, G là ba phần tử anh em liền nhau theo thứ tự ấy; chọn G|
| E > F + G |F là con trực tiếp của E; G liền sau F và cùng cha, nên G cũng là con của E|
E1, E2, E3, E, F, G là kí hiệu để giải thích; khi viết CSS thật thay bằng bộ chọn như article, section, em, strong, span.
Hai chuỗi con cháu
```html
<article>
<section>
<em>A</em>
<div><em>B</em></div>
</section>
</article>
<em>C</em>
```
article section em chọn A và B; B vẫn nằm trong section dù qua div. article > section > em chỉ chọn A vì B không phải con trực tiếp của section. C nằm ngoài article nên không khớp hai chuỗi ấy.
Trong tệp mẫu, chuỗi rộng đặt chữ xanh dương; chuỗi trực tiếp đặt nền vàng. Vì thế A có chữ xanh dương trên nền vàng, còn B có chữ xanh dương mà không nhận nền vàng từ quy tắc trực tiếp.
Hai chuỗi anh em
```html
<section>
<em>Mốc</em>
<strong>A</strong>
<span>B</span>
<span>C</span>
</section>
```
em + strong + span chọn span B: strong A liền sau em, span B liền sau strong A. Nó không chọn span C.
section > strong + span cũng chọn B: strong A là con trực tiếp của section, B liền sau A và cùng cha. Trong tệp mẫu, B nhận viền teal từ chuỗi đầu và màu chữ đỏ từ chuỗi sau. Đây là hai thuộc tính khác nhau, cùng có thể áp dụng.
Bài luyện
Trong ví dụ article–section, article > section > em chọn gì?
B có cha trực tiếp là div.
C nằm ngoài article.
C không thuộc article, B không trực tiếp thuộc section.
Đúng. Cả hai bước đều là quan hệ trực tiếp.
Lời giải
section là con trực tiếp của article. em A là con trực tiếp của section, còn em B nằm qua div và C ở ngoài article. Vì có hai dấu >, chỉ A đáp ứng cả hai điều kiện.
Bài luyện
Trong mẫu em, strong A, span B, span C cùng cha, em + strong + span chọn gì?
Đối tượng cuối chuỗi là span.
strong A là mắt nối giữa, chưa phải phần tử cuối.
Đúng. B liền sau strong A, còn A liền sau em.
C liền sau span B, không liền sau strong A.
Lời giải
Chuỗi cần em rồi strong rồi span ở ba vị trí phần tử liền nhau. strong A đứng ngay sau em và span B ngay sau A, nên B khớp. C không liền sau strong A.
Bài luyện
Với E > F + G, nhận xét nào đúng về G được chọn?
F và G cùng cha E; G không cùng cấp với E trong quan hệ này.
Đúng. Kết hợp điều kiện > và +.
Dấu + là quan hệ anh em, không phải con cháu.
G phải đứng sau, không đứng trước F.
Lời giải
E > F yêu cầu F là con trực tiếp của E. F + G yêu cầu G liền sau F và cùng cha. Vì cha của F là E nên cha của G cũng là E; G là con trực tiếp của E và liền sau F.
Đang học