Селекторы соседних братьев CSS

Селектор соседнего брата (Adjacent sibling selector) может выбирать элемент, который следует за другим элементом, и у которых одинаковый родительский элемент.

Выбор соседнего брата

Если нужно выбрать элемент, который следует за другим элементом и у которых одинаковый родительский элемент, можно использовать селектор соседнего брата (Adjacent sibling selector).

Например, если нужно увеличить верхний отступ абзаца, который следует за элементом h1, можно написать так:

h1 + p {margin-top:50px;}

Этот селектор читается как: «Выберите абзац, который следует за элементом h1, у которого h1 и p элементы имеют одинаковый родительский элемент».

Попробуйте сами

Объяснение грамматики

Соседний брат селектор использует знак плюса (+), то есть соседний брат соотносителя (Adjacent sibling combinator).

Комментарий:Как и у знака之子, рядом с знаком兄弟 соотносителя может быть пробельный символ.

Пожалуйста, посмотрите на этот фрагмент документа:

<div>
  <ul>
    <li>Элемент списка 1</li>
    <li>Элемент списка 2</li>
    <li>Элемент списка 3</li>
  </ul>
  <ol>
    <li>Элемент списка 1</li>
    <li>Элемент списка 2</li>
    <li>Элемент списка 3</li>
  </ol>
</div>

В этом фрагменте div элемент содержит два списка: один unordered list и один ordered list, каждый список содержит три list items. Эти два списка являются brother, а list items themselves также являются brother. Однако, list items первого списка и list items второго списка не являются brother, потому что эти两组 list items не都属于 одному parent element (наиболее можно считать cousins).

Помните, что с помощью одного символа brother можно выбирать только второй элемент из двух相邻 brother. См. следующий селектор:

li + li {font-weight:bold;}

В上面的 селекторе только второй и третий список items будут сделаны жирными. Первый список item не будет受到影响.

Попробуйте сами

Сочетание с другими селекторами

Соседний символ brother также может быть использован в сочетании с другими символами:

html > body table + ul {margin-top:20px;}

Этот селектор объясняется как: выбирает все brother ul элементы,出现的 все brother ul элементы после table элемента, который находится в body элементе, который himself является child элемент html элемента.