Как понять CSS обычный одноуровневый селектор

1. Обычные одноуровневые селекторы CSS относятся ко всем элементам, связанным с другим элементом, оба из которых имеют один и тот же родительский элемент.

2. В селекторе обычных братьев используется тильда (~) как объединяющий символ для обычных братьев.

Пример

<голова>

<мета-кодировка="UTF-8">

<стиль>

.предок {

ширина: 500 пикселей;

высота: 300 пикселей;

}

.родитель {

ширина: 300 пикселей;

высота: 200 пикселей;

}

.ребенок {

ширина: 200 пикселей;

высота: 100 пикселей;

}

/* Размещаем элемент, родственным элементом которого является div, после .child1*/

.child1~div {

цвет фона: светло-коралловый;

}

<тело>

<дел>

это предок.

<дел>

это родитель.