Селекторҳои мураккаб бо ҳолатҳои пайвандҳо дар CSS

Ҳамаи селекторҳои мураккабе, ки мо пештар омӯхтем, метавонем барои пайвандҳо низ истифода кунем.

Биёед ба мисол нигарем. Бигзор пайвандҳои мо дар блоке бо id додашуда қарор доранд:

<div id="block">
	<a href="#">пайванд</a>
	<a href="#">пайванд</a>
	<a href="#">пайванд</a>
</div>

Биёед барои пайвандҳои ин блок услубҳо муқаррар кунем:

#block a:link, #block a:visited {
	color: red;
}
#block a:hover {
	text-decoration: none;
}

Ҳамчун қоида, ҳолатҳои link ва visited ҷудо намешаванд, бинобар ин рамзро ба тариқи зерин содда кардан мумкин аст:

#block a {
	color: red;
}
#block a:hover {
	text-decoration: none;
}

Барои мо бигӯед, ки селектор дар рамзи зер чӣ чизро интихоб мекунад. Сипас рамзи HTML-ро нависед, ки ба ин селектор мувофиқ аст. Инҷо рамз бо селектор оварда шудааст:

#test a {
	color: red;
}
#test a:hover {
	text-decoration: none;
}