Bộ chọn hậu duệ trong CSS
Giả sử chúng ta có một danh sách ul và một danh sách
ol:
<ul>
<li>text</li>
<li>text</li>
<li>text</li>
<li>text</li>
<li>text</li>
</ul>
<ol>
<li>text</li>
<li>text</li>
<li>text</li>
<li>text</li>
<li>text</li>
</ol>
Hãy tô màu các thẻ li trong các danh sách này
màu đỏ:
li {
color: red;
}
Bây giờ, giả sử chúng ta muốn tô màu các thẻ li
của danh sách ul màu đỏ, còn các thẻ li
của danh sách ol - màu xanh lá cây.
Trong trường hợp này, bộ chọn hậu duệ sẽ giúp chúng ta.
Nó cho phép chọn các thẻ dựa trên phần tử cha của chúng.
Để làm điều này, cần chỉ định bộ chọn của phần tử cha,
rồi cách một dấu cách - bộ chọn của hậu duệ. Trong trường hợp của chúng ta,
bộ chọn ul li sẽ chọn tất cả
các thẻ li từ danh sách ul, còn bộ chọn
ol li - sẽ chọn tất cả các thẻ li
từ danh sách ol. Hãy tô màu chúng
với các màu sắc mong muốn:
ul li {
color: red;
}
ol li {
color: green;
}
Bộ chọn hậu duệ không nhất thiết phải bao gồm
hai bộ chọn thẻ - có thể có
bất kỳ số lượng nào, được viết cách nhau bởi dấu cách.
Trong đoạn mã sau, ví dụ, tất cả
các thẻ i, nằm bên trong thẻ li,
lần lượt nằm bên trong thẻ
ul, được chọn:
ul li i {
color: red;
}
Cho đoạn mã sau:
<ul>
<li>text <i>italic</i></li>
<li>text <i>italic</i></li>
<li>text <i>italic</i></li>
<li>text <i>italic</i></li>
</ul>
<p>
paragraph text <i>italic</i>
</p>
<p>
paragraph text <i>italic</i>
</p>
Hãy tô màu chữ in nghiêng từ các thẻ
ul màu đỏ, còn chữ in nghiêng từ các thẻ
p màu xanh lá cây.
Cho đoạn mã sau:
<p>
paragraph text <b><i>bold italic</i></b>
</p>
<p>
paragraph text <i>italic</i>
</p>
Hãy tô màu chữ in nghiêng, nằm bên trong
thẻ b, thẻ này lần lượt nằm bên trong thẻ p,
màu đỏ.