Afstammelingselektor in CSS

Laat ons 'n lys ul en 'n lys ol hê:

<ul>
	<li>teks</li>
	<li>teks</li>
	<li>teks</li>
	<li>teks</li>
	<li>teks</li>
</ul>
<ol>
	<li>teks</li>
	<li>teks</li>
	<li>teks</li>
	<li>teks</li>
	<li>teks</li>
</ol>

Kom ons maak die li-etikette in hierdie lyste rooi:

li {
	color: red;
}

Laat ons nou sê ons wil die li-etikette van die ul-lys rooi maak, en die li-etikette van die ol-lys - groen.

In hierdie geval sal die afstammelingselektor help. Dit laat ons toe om etikette volgens hul ouer te kies. Om dit te doen, moet jy die selektor van die ouer spesifiseer, en dan, met 'n spasie, die selektor van die afstammeling. In ons geval sal selektor ul li al die li-etikette uit die ul-lys kies, en selektor ol li - sal al die li-etikette uit die ol-lys kies. Laat ons hulle in die nodige kleure kleur:

ul li {
	color: red;
}
ol li {
	color: green;
}

Die afstammelingselektor hoef nie noodwendig uit twee etiketselektors te bestaan nie - daar kan enige hoeveelheid van hulle wees, geskryf met 'n spasie. In die volgende kode, byvoorbeeld, word al die i-etikette gekies wat binne die li-etiket is, wat op hul beurt binne die ul-etiket is:

ul li i {
	color: red;
}

Die volgende kode word gegee:

<ul>
	<li>teks <i>kursief</i></li>
	<li>teks <i>kursief</i></li>
	<li>teks <i>kursief</i></li>
	<li>teks <i>kursief</i></li>
</ul>

<p>
	paragraaf teks <i>kursief</i>
</p>
<p>
	paragraaf teks <i>kursief</i>
</p>

Kleur die kursief uit die ul-etikette rooi, en die kursief uit die p-etikette - groen.

Die volgende kode word gegee:

<p>
	paragraaf teks <b><i>vet kursief</i></b>
</p>
<p>
	paragraaf teks <i>kursief</i>
</p>

Kleur die kursief wat binne die b-etiket is rooi, wat op sy beurt binne die p-etiket is.