Когда использовать знак CSS +

Ответ 1

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

p {
    /* styles for the first paragraph  */
}

p + p {
    /* styles for all other paragraphs */
}

Это может заменить использование class="first" во многих ситуациях.

EDIT: Использование псевдо-класса first-child будет работать лучше для этого конкретного случая, поскольку оно поддерживается более широким диапазоном браузеров. (Спасибо alex)

Вы также можете настроить, как некоторые элементы располагаются рядом друг с другом. Если у вас есть неупорядоченный список, который отлично выглядит сам по себе, но ему нужно меньше отступов вверху, когда рядом с абзацем, вы можете использовать:

ul {
    padding-top: 1em;
    /* Default ul styling */
}

p + ul {
    padding-top: 0;
    /* special styling for lists that come after paragraphs */
}

Ответ 2

Используйте его, когда вы хотите настроить таргетинг на следующий селектор соответствия определенного селектора. Например.

<p>Item 1</p>
<div>Item 2</div>
<div>Item 3</div>
<p>Item 4</p>

Использование p + div позволит вам создать элемент 2, поскольку он сразу после тега p. Пример в действии.

Использование p + p не будет создавать ничего, поскольку следующий тег p не будет рядом с первым. Пример в действии.

Использование div + p позволит вам стилизовать элемент 4, так как он сразу после div. Пример в действии.

И так далее...

Ответ 3

Это Смежный селектор селектора

Смежные селекторные ролики имеют следующий синтаксис: E1 + E2, где E2 субъект селектора. селектор, если доля E1 и E2 тот же самый родитель в дереве документов и E1 сразу предшествует E2, игнорирование неэлементных узлов (например, текстовые узлы и комментарии).

В менее общих терминах он позволяет выбрать элемент как обычный, но также квалифицировать, что он имеет конкретный элемент до него на том же уровне.

Например, с помощью этого HTML:

<p><div></div></p>
<span></span>

Обычно вы можете выбрать span, просто спросив span, но если вы хотите повлиять только на span на определенный стиль, когда есть p непосредственно перед этим, вы можете использовать p + span, Обратите внимание: здесь вы не можете использовать div + span, потому что div находится на другом уровне.

Ответ 4

Также в CSS2 добавлен прямой смежный комбинатор. Например, Представьте, что вы хотите отступать все абзацев в документе, за исключением сразу после подкатегория (<h2>). Второе правило ниже показан селектор h2, объединенный с p-селектором, использующим знак плюса как комбинатор, чтобы указать, что объявление применяется только в том случае, если pсразу следует h2:

p { text-indent: 0.5in; }
h2 + p { text-indent: 0; }

От - http://www.xml.com/pub/a/2003/06/18/css3-selectors.html