1. Обычные одноуровневые селекторы CSS относятся ко всем элементам, связанным с другим элементом, оба из которых имеют один и тот же родительский элемент.
2. В селекторе обычных братьев используется тильда (~) как объединяющий символ для обычных братьев.
Пример
<!DOCTYPE html>
<html>
<голова>
<мета-кодировка="UTF-8">
<meta name="viewport" content="width=device-width, Initial-scale=1.0">
<title>Общий селектор одного уровня</title>
<стиль>
.предок {
ширина: 500 пикселей;
высота: 300 пикселей;
}
.родитель {
ширина: 300 пикселей;
высота: 200 пикселей;
}
.ребенок {
ширина: 200 пикселей;
высота: 100 пикселей;
}
/* Размещаем элемент, родственным элементом которого является div, после .child1*/
.child1~div {
цвет фона: светло-коралловый;
}
</стиль>
</голова>
<тело>
<дел>
это предок.
<дел>
это родитель.
<div>это child0.</div>
<div>это ребенок1.</div>
<div>это ребенок2.</div>
<div>это child3.</div>
</div>
</div>
</тело>
</html>
Вышеизложенное представляет собой понимание обычного одноуровневого селектора CSS, я надеюсь, что это будет полезно всем.
Еще одно руководство по изучению CSS: учебник по CSS