Что означает селектор CSS " + " (знак плюс)?

это соседний селектор братьев и сестер.

С всплеск стиля блога.

чтобы определить смежный селектор CSS, используется знак плюс.

h1+p {color:blue;}

вышеуказанный код CSS будет форматировать первый абзац после (не внутри) любых заголовков h1 как синий.

h1>p выбирает p элемент, который является прямым (первого поколения) ребенка (внутри) в h1 элемент.

• h1>p игр <h1> <p></p> </h1> (<p> внутри <h1>)

h1+p выберите первый p элемент, который является братом (на том же уровне dom), что и h1 элемент.

• h1+p игр <h1></h1> <p><p/> (<p> далее до/после <h1>)

на + знак означает выберите adjacent sibling

пример:

в CSS

p + p
{
   font-weight: bold;
} 

HTML-код

стиль будет применяться со второго <p>

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

пример

смотрите эту скрипку, и вы поймете ее навсегда:http://jsfiddle.net/7c05m7tv/ (Еще Одна Скрипка: http://jsfiddle.net/7c05m7tv/70/)

Поддержка Браузеров

селекторы смежного брата поддерживаются в Internet Explorer 5.x Macintosh. Они также поддерживаются в Netscape 6 preview release 1 для всех бесчисленных платформ, для которых он доступен, и в preview release 3 Opera 4 для Windows. В IE5 для Windows и Opera 3 для Windows есть ошибки в обработке селекторов соседних братьев.

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

узнать больше

• http://css-tricks.com/almanac/selectors/a/adjacent-sibling/
• http://www.w3.org/TR/CSS2/selector.html#adjacent-selectors
• https://developer.mozilla.org/en-US/docs/Web/CSS/Adjacent_sibling_selectors

"+" является смежным селектором братьев. Он будет выбирать любой p непосредственно после p (не ребенок или родитель, хотя, брат).

+ селектор называется Adjacent Sibling Selector.

например, селектор p + p выбирает p элементы сразу после p элементов

это можно рассматривать как looking outside селектор, который проверяет наличие следующего элемента.

вот пример фрагмента, чтобы сделать вещи более ясными:

body {
  font-family: Tahoma;
  font-size: 12px;
}
p + p {
  margin-left: 10px;
}

<div>
  <p>Header paragraph</p>
  <p>This is a paragraph</p>
  <p>This is another paragraph</p>
  <p>This is yet another paragraph</p>
  <hr>
  <p>Footer paragraph</p>
</div>

так как мы одно и то же тема, стоит упомянуть еще один селектор,~ выбор General Sibling Selector

например, p ~ p выбирает все p, которая соответствует p не имеет значения, где это, а как p должен иметь одного и того же родителя.

вот как это выглядит с той же разметки:

body {
  font-family: Tahoma;
  font-size: 12px;
}
p ~ p {
  margin-left: 10px;
}

<div>
  <p>Header paragraph</p>
  <p>This is a paragraph</p>
  <p>This is another paragraph</p>
  <p>This is yet another paragraph</p>
  <hr>
  <p>Footer paragraph</p>
</div>

обратите внимание, что последний p также соответствует в этом образце.

Он будет соответствовать любому элементу p Это непосредственно примыкает к элементу 'p'. Смотри:http://www.w3.org/TR/CSS2/selector.html

Он выбирает следующий абзац и отступы в начале абзаца слева так же, как вы могли бы в Microsoft Word.

+ представляет один из относительных селекторов. Список всех относительных селекторов:

div p - все <p> внутри элементы.

div > p - все <p> элементы, прямой родитель <div> выбранные. Он тоже работает назад (p < div)

div + p - все <p> элементы сразу после <div> элемент выбран.

div ~ p - все <p> элементы, которым предшествует a <div> элемент выбран.

подробнее о проверке селекторов здесь.

плюс ( + ) выберет первый непосредственный элемент. При использовании + selector необходимо указать два параметра. Это будет более ясно на примере: здесь div и span являются параметрами, поэтому в этом случае будет стилизован только первый span после div.

 div+ span{
   color: green;
   padding :100px;
}

     <div>The top or first element  </div>
       <span >this is span immediately after div, this will be selected</span>
       <span>This will not be selected</span>

выше стиль будет применяться только к первому промежутку после div. Важно отметить, что второй диапазон не будет выбран.

p+p{
//styling the code
}

p+p{
} simply mean find all the adjacent/sibling paragraphs with respect to first paragraph in DOM body.

    <div>
    <input type="text" placeholder="something">
    <p>This is first paragraph</p>
    <button>Button </button>
    <p> This is second paragraph</p>
    <p>This is third paragraph</p>
    </div>

    Styling part 
    <style type="text/css">
        p+p{
            color: red;
            font-weight: bolder;
        }
    </style>

   It will style all sibling paragraph with red color.

конечный результат выглядит следующим образом

это означает, что он соответствует каждому p элемент, который непосредственно примыкает

www.snoopcode.com/css/examples/css-adjacent-sibling-selector