Der Geschwisterselektor in CSS

Der Geschwisterselektor ~ erlaubt es, alle Elemente auszuwählen, die nach einem bestimmten Element innerhalb desselben Elternelements stehen.

Beispiel

Lassen Sie uns alle p-Tags ansprechen, die nach h2-Tags stehen, und sie rot einfärben:

<div>
	<h2>text</h2>
	<p>
		+++
	</p>
	<p>
		+++
	</p>
	<p>
		+++
	</p>
</div>
<p>
	-
</p>

h2 ~ p {
	color: red;
}

Lassen Sie uns alle p-Tags ansprechen, die nach Elementen mit der Klasse .test stehen, und sie rot einfärben:

<div>
	<p class="test">
		text
	</p>
	<p>
		+++
	</p>
	<p>
		+++
	</p>
</div>
<p>
	---
</p>

.test ~ p {
	color: red;
}

Lassen Sie uns alle Elemente mit der Klasse .elem ansprechen, die nach Elementen mit der Klasse .test stehen, und sie rot einfärben:

<div>
	<p class="test">
		text
	</p>
	<p class="elem">
		+++
	</p>
	<p>
		---
	</p>
	<p class="elem">
		+++
	</p>
</div>
<p>
	---
</p>

.test ~ .elem {
	color: red;
}

Gegeben ist der Code:

<ul>
	<li>1</li>
	<li>2</li>
	<li>3</li>
	<li>4</li>
	<li id="elem">5</li>
	<li>6</li>
	<li>7</li>
	<li>8</li>
	<li>9</li>
</ul>

Schreiben Sie einen Selektor, der alle Elemente auswählt, die nach dem Element #elem stehen.