Пусть у нас есть список ul и список 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>
Давайте покрасим теги li в этих списках в красный цвет:
li {
color: red;
}
Пусть теперь мы хотим покрасить теги li списка ul в красный цвет, а теги li списка ol - в зеленый.
В этом случае нам поможет селектор потомков. Он позволяет выбирать теги по их родителю. Для этого нужно указать селектор родителя, а через пробел - селектор потомка. В нашем случае селектор ul li выберет все теги li из списка ul, а селектор ol li - выберет все теги li из списка ol. Покрасим их в нужные цвета:
ul li {
color: red;
}
ol li {
color: green;
}
Селектор потомков не обязательно должен состоять из двух селекторов тегов - их может быть любое количество, записанное через пробел. В следующем коде, например, выбираются все теги i, находящиеся внутри тега li, которые в свою очередь находятся внутри тега ul:
[code78]