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:

html<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 đỏ:

cssli {
  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:

cssul 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:

cssul li i {
  color: red;
}

html<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>

html<p>
  paragraph text <b><i>bold italic</i></b>
</p>
<p>
  paragraph text <i>italic</i>
</p>